srcdev-nuxt-components 9.1.49 → 9.1.51

package/app/pages/ui/deep-expanding-menu.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h1 class="page-heading-2">Deep Expanding Menu</h1>
+          <p>
+            A horizontal navigation menu using the CSS Popover API. Top-level items can be direct links or toggle a
+            panel of child links below them.
+          </p>
+        </PageRow>
+
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h2 class="page-heading-3 mbe-16">Basic example</h2>
+          <div class="demo-surface">
+            <DeepExpandingMenu :nav-links="basicLinks" />
+          </div>
+        </PageRow>
+
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h2 class="page-heading-3 mbe-16">Mixed links and groups</h2>
+          <div class="demo-surface">
+            <DeepExpandingMenu :nav-links="mixedLinks" />
+          </div>
+        </PageRow>
+
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32', 'mbe-64']">
+          <h2 class="page-heading-3 mbe-16">Many child links</h2>
+          <div class="demo-surface">
+            <DeepExpandingMenu :nav-links="richLinks" />
+          </div>
+        </PageRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Deep Expanding Menu",
+  meta: [{ name: "description", content: "Examples of Deep Expanding Menu UI Component" }],
+  bodyAttrs: {
+    class: "deep-expanding-menu-page",
+  },
+});
+
+const basicLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  { name: "About", path: "#about" },
+  {
+    name: "Services",
+    childLinksTitle: "Our Services",
+    childLinks: [
+      { name: "Consulting", path: "#consulting" },
+      { name: "Design", path: "#design" },
+      { name: "Development", path: "#development" },
+    ],
+  },
+  { name: "Contact", path: "#contact" },
+];
+
+const mixedLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Products",
+    childLinksTitle: "Browse Products",
+    childLinks: [
+      { name: "Electronics", path: "#electronics" },
+      { name: "Clothing", path: "#clothing" },
+      { name: "Books", path: "#books" },
+      { name: "Accessories", path: "#accessories" },
+    ],
+  },
+  {
+    name: "Company",
+    childLinksTitle: "About Us",
+    childLinks: [
+      { name: "Our Story", path: "#story" },
+      { name: "Team", path: "#team" },
+      { name: "Careers", path: "#careers" },
+    ],
+  },
+  { name: "Blog", path: "#blog" },
+  { name: "Contact", path: "#contact" },
+];
+
+const richLinks: ResponsiveHeaderNavItem[] = [
+  {
+    name: "Components",
+    childLinksTitle: "UI Components",
+    childLinks: [
+      { name: "Carousel", path: "/ui/carousel-basic" },
+      { name: "Accordian", path: "/ui/accordian" },
+      { name: "Tabs", path: "/ui/tabs" },
+      { name: "Dialogs", path: "/ui/display-dialog" },
+      { name: "Tooltips", path: "/ui/tooltips" },
+      { name: "Display Toast", path: "/ui/display-toast" },
+      { name: "Card Core", path: "/ui/card-core" },
+      { name: "Glowing Border", path: "/ui/glowing-border" },
+    ],
+  },
+  {
+    name: "Layouts",
+    childLinksTitle: "Layout Components",
+    childLinks: [
+      { name: "Simple Grid", path: "/ui/simple-grid" },
+      { name: "Masonry Grid", path: "/ui/masonry-grid" },
+      { name: "Block Decorators", path: "/ui/block-decorators" },
+    ],
+  },
+  {
+    name: "Navigation",
+    childLinksTitle: "Navigation Components",
+    childLinks: [
+      { name: "Site Navigation", path: "/ui/navigation/site-navigation" },
+      { name: "Nav Horizontal", path: "/ui/navigation/navigation-horizontal" },
+      { name: "Deep Expanding Menu", path: "/ui/deep-expanding-menu" },
+      { name: "Magnetic Navigation", path: "/ui/magnetic-navigation" },
+    ],
+  },
+];
+</script>
+
+<style lang="css">
+.demo-surface {
+  /* background-color: light-dark(var(--slate-01), var(--slate-09)); */
+  /* border: 1px solid light-dark(var(--slate-03), var(--slate-07)); */
+  border-radius: 1.2rem;
+  padding: 2.4rem;
+  overflow: visible;
+}
+</style>

package/app/pages/ui/display-avatar.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout">
+        <PageRow tag="div" variant="popout">
           <h1 class="page-heading-2">Display Avatar</h1>
 
           <form>
@@ -136,7 +136,7 @@
               </div>
             </div>
           </section>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/display-banner.vue

@@ -2,9 +2,9 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-2">DisplayBanner</h1>
-        </LayoutRow>
+        </PageRow>
 
         <DisplayBanner tag="div" :style-class-passthrough="['mbe-20']">
           <template #canvas>

package/app/pages/ui/display-chip.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout">
+        <PageRow tag="div" variant="popout">
           <h1 class="page-heading-2">Display Chip</h1>
 
           <!-- ── QA Panel (dev only) ───────────────────────────────── -->
@@ -15,7 +15,6 @@
                 </code>
               </summary>
               <div class="qa-panel__body">
-
                 <div class="qa-panel__group">
                   <span class="qa-panel__label">Size</span>
                   <div class="qa-panel__chips">
@@ -25,7 +24,9 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaSize === preset }"
                       @click="qaSize = preset"
-                    >{{ preset }}px</button>
+                    >
+                      {{ preset }}px
+                    </button>
                   </div>
                 </div>
 
@@ -38,7 +39,9 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaMaskWidth === preset }"
                       @click="qaMaskWidth = preset"
-                    >{{ preset }}px</button>
+                    >
+                      {{ preset }}px
+                    </button>
                   </div>
                 </div>
 
@@ -51,22 +54,16 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaOffset === preset }"
                       @click="qaOffset = preset"
-                    >{{ preset }}px</button>
+                    >
+                      {{ preset }}px
+                    </button>
                   </div>
                 </div>
 
                 <div class="qa-panel__group">
                   <span class="qa-panel__label">Angle — {{ qaAngle }}deg</span>
-                  <input
-                    v-model.number="qaAngle"
-                    type="range"
-                    min="0"
-                    max="360"
-                    step="1"
-                    class="qa-panel__range"
-                  />
+                  <input v-model.number="qaAngle" type="range" min="0" max="360" step="1" class="qa-panel__range" />
                 </div>
-
               </div>
             </details>
           </div>
@@ -144,7 +141,7 @@
               </div>
             </div>
           </section>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -177,12 +174,14 @@ const sizePresets = [8, 10, 12, 16, 20, 24];
 const maskWidthPresets = [0, 2, 4, 6, 8];
 const offsetPresets = [-4, 0, 2, 4, 8];
 
-const chipConfig = computed((): DisplayChipConfig => ({
-  size: `${qaSize.value}px`,
-  maskWidth: `${qaMaskWidth.value}px`,
-  offset: `${qaOffset.value}px`,
-  angle: `${qaAngle.value}deg`,
-}));
+const chipConfig = computed(
+  (): DisplayChipConfig => ({
+    size: `${qaSize.value}px`,
+    maskWidth: `${qaMaskWidth.value}px`,
+    offset: `${qaOffset.value}px`,
+    angle: `${qaAngle.value}deg`,
+  })
+);
 </script>
 
 <style lang="css">
@@ -207,7 +206,9 @@ const chipConfig = computed((): DisplayChipConfig => ({
     list-style: none;
     user-select: none;
 
-    &::-webkit-details-marker { display: none; }
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   .qa-panel__title {
@@ -264,7 +265,9 @@ const chipConfig = computed((): DisplayChipConfig => ({
     cursor: pointer;
     transition: background 0.15s;
 
-    &:hover { background: oklch(0% 0 0 / 0.4); }
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
 
     &.is-active {
       background: oklch(55% 0.18 240);
@@ -301,8 +304,12 @@ const chipConfig = computed((): DisplayChipConfig => ({
       transition: background 0.15s;
     }
 
-    &:hover::-webkit-slider-thumb { background: oklch(62% 0.18 240); }
-    &:hover::-moz-range-thumb { background: oklch(62% 0.18 240); }
+    &:hover::-webkit-slider-thumb {
+      background: oklch(62% 0.18 240);
+    }
+    &:hover::-moz-range-thumb {
+      background: oklch(62% 0.18 240);
+    }
   }
 
   /* ── Demo grid ─────────────────────────────────────────────────── */

package/app/pages/ui/display-details.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['display-details-section', 'mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['display-details-section', 'mbe-20']">
           <h1 class="page-heading-2">Details element - Unlinked</h1>
           <p class="mbe-12">Following 2 details block behave independantly.</p>
 
@@ -53,13 +53,9 @@
               </div>
             </template>
           </DisplayDetailsCore>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow
-          tag="div"
-          variant="full-width"
-          :style-class-passthrough="['display-details-section', 'mbe-20', 'hidden']"
-        >
+        <PageRow tag="div" variant="full" :style-class-passthrough="['display-details-section', 'mbe-20', 'hidden']">
           <h2 class="page-heading-2">Details element - Linked</h2>
           <p class="mbe-12">Details panels are linked, only 1 can be open at a time.</p>
 
@@ -108,7 +104,7 @@
               </div>
             </template>
           </DisplayDetailsCore>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -117,7 +113,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Browser title tag",
@@ -127,7 +123,7 @@ useHead({
       content: "Meta description content",
     },
   ],
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/ui/display-dialog.vue

@@ -2,19 +2,20 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
-          <h1 class="page-heading-2">Dialog withscrollable content</h1>
-          <p><button @click.prevent="controlDialogs('sample1', true)" type="button">Show Dialog</button></p>
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Dialog with scrollable content</h1>
+          <p><button type="button" @click.prevent="openDialog('sample1')">Show Dialog</button></p>
 
-          <DisplayDialogScrollableContent
+          <DisplayDialog
             v-if="dialogsConfig['sample1']"
             v-model="dialogsConfig['sample1']"
+            variant="dialog"
             :style-class-passthrough="['your-modifier-class']"
-            :allowContentScroll="true"
+            :allow-content-scroll="true"
             data-dialog-id="sample1"
           >
             <template #dialogTitle>
-              <p class="text-normal wght-700 m-0">Confirm logout?</p>
+              <p class="text-normal wght-700 m-0">Dialog with scrollable content</p>
             </template>
 
             <template #dialogContent>
@@ -57,36 +58,25 @@
                   Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
                   at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
                 </p>
-                <p class="text-normal">
-                  Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque
-                  neque varius nostra. Imperdiet tellus libero ornare lobortis maximus rutrum parturient litora viverra.
-                  Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
-                  at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
-                </p>
-                <p class="text-normal">
-                  Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque
-                  neque varius nostra. Imperdiet tellus libero ornare lobortis maximus rutrum parturient litora viverra.
-                  Praesent proin sem nulla mauris justo mi morbi. Neque diam sodales nam nascetur commodo risus. Ornare
-                  at sit, mattis erat aenean ipsum. Dictum integer ipsum suspendisse sagittis nisl sollicitudin.
-                </p>
               </div>
             </template>
             <template #actionButtonLeft>
-              <button @click.prevent="controlDialogs('sample1', false, 'cancel')" type="submit">Cancel</button>
+              <button type="submit" @click.prevent="closeDialog('sample1', 'cancel')">Cancel</button>
             </template>
             <template #actionButtonRight>
-              <button @click.prevent="controlDialogs('sample1', false, 'confirm')" type="submit">Confirm</button>
+              <button type="submit" @click.prevent="closeDialog('sample1', 'confirm')">Confirm</button>
             </template>
-          </DisplayDialogScrollableContent>
-        </LayoutRow>
+          </DisplayDialog>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">Confirm Dialog</h2>
-          <p><button @click.prevent="controlDialogs('logout', true)" type="button">Show Dialog Prompt</button></p>
+          <p><button type="button" @click.prevent="openDialog('logout')">Show Confirm Dialog</button></p>
 
-          <DisplayDialogConfirm
+          <DisplayDialog
             v-if="dialogsConfig['logout']"
             v-model="dialogsConfig['logout']"
+            variant="confirm"
             :style-class-passthrough="['your-modifier-class']"
             data-dialog-id="logout"
           >
@@ -100,13 +90,72 @@
               </div>
             </template>
             <template #actionButtonLeft>
-              <button @click.prevent="controlDialogs('logout', false, 'cancel')" type="submit">Cancel</button>
+              <button type="submit" @click.prevent="closeDialog('logout', 'cancel')">Cancel</button>
+            </template>
+            <template #actionButtonRight>
+              <button type="submit" @click.prevent="closeDialog('logout', 'confirm')">Confirm</button>
+            </template>
+          </DisplayDialog>
+        </PageRow>
+
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Alert Dialog</h2>
+          <p class="text-normal">Cannot be dismissed by clicking outside or pressing Escape — requires explicit action.</p>
+          <p><button type="button" @click.prevent="openDialog('deleteAccount')">Show Alert Dialog</button></p>
+
+          <DisplayDialog
+            v-if="dialogsConfig['deleteAccount']"
+            v-model="dialogsConfig['deleteAccount']"
+            variant="alert"
+            :style-class-passthrough="['your-modifier-class']"
+            data-dialog-id="deleteAccount"
+          >
+            <template #dialogTitle>
+              <p class="text-normal wght-700 m-0">Delete account?</p>
+            </template>
+
+            <template #dialogContent>
+              <div class="m-0">
+                <p class="text-normal">This action is permanent and cannot be undone. All your data will be removed.</p>
+              </div>
+            </template>
+            <template #actionButtonLeft>
+              <button type="button" @click.prevent="closeDialog('deleteAccount', 'cancel')">Cancel</button>
+            </template>
+            <template #actionButtonRight>
+              <button type="button" @click.prevent="closeDialog('deleteAccount', 'confirm')">Delete account</button>
+            </template>
+          </DisplayDialog>
+        </PageRow>
+
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Fullscreen Dialog</h2>
+          <p><button type="button" @click.prevent="openDialog('fullscreen')">Show Fullscreen Dialog</button></p>
+
+          <DisplayDialog
+            v-if="dialogsConfig['fullscreen']"
+            v-model="dialogsConfig['fullscreen']"
+            variant="fullscreen"
+            :style-class-passthrough="['your-modifier-class']"
+            data-dialog-id="fullscreen"
+          >
+            <template #dialogTitle>
+              <p class="text-normal wght-700 m-0">Fullscreen dialog</p>
+            </template>
+
+            <template #dialogContent>
+              <div class="pt-12 pb-12">
+                <p class="text-normal">This dialog fills the entire viewport. Useful for immersive flows such as onboarding, image editors, or multi-step wizards.</p>
+              </div>
+            </template>
+            <template #actionButtonLeft>
+              <button type="button" @click.prevent="closeDialog('fullscreen', 'cancel')">Cancel</button>
             </template>
             <template #actionButtonRight>
-              <button @click.prevent="controlDialogs('logout', false, 'confirm')" type="submit">Confirm</button>
+              <button type="button" @click.prevent="closeDialog('fullscreen', 'confirm')">Done</button>
             </template>
-          </DisplayDialogConfirm>
-        </LayoutRow>
+          </DisplayDialog>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -115,7 +164,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "UI Dialogs",
@@ -123,109 +172,25 @@ useHead({
   bodyAttrs: {
     class: "home",
   },
-})
-
-const dialogBtnSampleAction = () => {
-  console.log("Dialog button action clicked")
-}
+});
 
-const { dialogsConfig, controlDialogs, initialiseDialogs, registerDialogCallbacks } = useDialogControls()
-
-onMounted(() => {
-  const dialogIds = ["logout", "sample1"]
-  initialiseDialogs(dialogIds)
-
-  // Register callbacks for each dialog
-  registerDialogCallbacks("sample1", {
-    onConfirm: dialogBtnSampleAction,
+const { dialogsConfig, openDialog, closeDialog } = useDialogControls({
+  sample1: {
+    onConfirm: () => console.log("Sample1 dialog confirmed"),
     onCancel: () => console.log("Sample1 dialog cancelled"),
-  })
-
-  registerDialogCallbacks("logout", {
-    onConfirm: () => {
-      dialogBtnSampleAction()
-      console.log("User logged out")
-    },
+  },
+  logout: {
+    onConfirm: () => console.log("User logged out"),
     onCancel: () => console.log("Logout cancelled"),
-  })
-})
+  },
+  deleteAccount: {
+    onConfirm: () => console.log("Account deleted"),
+    onCancel: () => console.log("Delete account cancelled"),
+  },
+  fullscreen: {
+    onConfirm: () => console.log("Fullscreen dialog confirmed"),
+    onCancel: () => console.log("Fullscreen dialog cancelled"),
+  },
+});
 </script>
 
-<style lang="css">
-.your-modifier-class {
-  &.display-dialog-core {
-    /* Dialog core styles */
-    /* Delete or add styles as needed */
-
-    &[open] {
-      @starting-style {
-      }
-    }
-
-    /* * Positioning the dialog */
-    &[justify-dialog="start"] {
-    }
-
-    &[justify-dialog="center"] {
-    }
-
-    &[justify-dialog="end"] {
-    }
-
-    &[align-dialog="start"] {
-    }
-
-    &[align-dialog="center"] {
-    }
-    &[align-dialog="end"] {
-    }
-
-    .inner {
-      &.confirm {
-      }
-
-      &.dialog {
-      }
-
-      &.form {
-      }
-
-      &.fullscreen {
-      }
-
-      &.modal {
-      }
-
-      .header {
-        .col-left {
-        }
-
-        .col-center {
-        }
-
-        .col-right {
-          .display-prompt-action {
-            &:hover {
-            }
-            &:focus-visible {
-            }
-
-            .icon {
-            }
-          }
-        }
-      }
-
-      .dialog-content {
-        &.allow-content-scroll {
-          &::-webkit-scrollbar {
-          }
-        }
-      }
-
-      .footer {
-      }
-    }
-  }
-}
-</style>