srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/composables/tests/useDialogControls.spec.ts

@@ -2,107 +2,77 @@ import { describe, it, expect, vi } from "vitest";
 import { useDialogControls } from "../useDialogControls";
 
 describe("useDialogControls", () => {
-  // ─── initialiseDialogs ────────────────────────────────────────────────────
+  // ─── initialisation ───────────────────────────────────────────────────────
 
-  describe("initialiseDialogs", () => {
+  describe("initialisation", () => {
     it("registers each dialog id as false", () => {
-      const { dialogsConfig, initialiseDialogs } = useDialogControls();
-      initialiseDialogs(["confirm", "delete"]);
+      const { dialogsConfig } = useDialogControls({ confirm: {}, delete: {} });
       expect(dialogsConfig.confirm).toBe(false);
       expect(dialogsConfig.delete).toBe(false);
     });
 
-    it("does not affect pre-existing dialog state", () => {
-      const { dialogsConfig, initialiseDialogs, controlDialogs } = useDialogControls();
-      initialiseDialogs(["a"]);
-      controlDialogs("a", true);
-      initialiseDialogs(["b"]);
-      expect(dialogsConfig.a).toBe(true); // unchanged
-      expect(dialogsConfig.b).toBe(false);
+    it("defaults to empty config when called with no arguments", () => {
+      const { dialogsConfig } = useDialogControls();
+      expect(Object.keys(dialogsConfig)).toHaveLength(0);
     });
   });
 
-  // ─── controlDialogs ───────────────────────────────────────────────────────
+  // ─── openDialog ───────────────────────────────────────────────────────────
 
-  describe("controlDialogs", () => {
-    it("sets dialog state to true (open)", () => {
-      const { dialogsConfig, initialiseDialogs, controlDialogs } = useDialogControls();
-      initialiseDialogs(["modal"]);
-      controlDialogs("modal", true);
+  describe("openDialog", () => {
+    it("sets dialog state to true", () => {
+      const { dialogsConfig, openDialog } = useDialogControls({ modal: {} });
+      openDialog("modal");
       expect(dialogsConfig.modal).toBe(true);
     });
 
-    it("sets dialog state to false (close)", () => {
-      const { dialogsConfig, initialiseDialogs, controlDialogs } = useDialogControls();
-      initialiseDialogs(["modal"]);
-      controlDialogs("modal", true);
-      controlDialogs("modal", false);
-      expect(dialogsConfig.modal).toBe(false);
-    });
-
     it("multiple dialogs are independent", () => {
-      const { dialogsConfig, initialiseDialogs, controlDialogs } = useDialogControls();
-      initialiseDialogs(["a", "b"]);
-      controlDialogs("a", true);
+      const { dialogsConfig, openDialog } = useDialogControls({ a: {}, b: {} });
+      openDialog("a");
       expect(dialogsConfig.a).toBe(true);
       expect(dialogsConfig.b).toBe(false);
     });
   });
 
-  // ─── registerDialogCallbacks + controlDialogs actions ────────────────────
+  // ─── closeDialog ──────────────────────────────────────────────────────────
+
+  describe("closeDialog", () => {
+    it("sets dialog state to false", () => {
+      const { dialogsConfig, openDialog, closeDialog } = useDialogControls({ modal: {} });
+      openDialog("modal");
+      closeDialog("modal");
+      expect(dialogsConfig.modal).toBe(false);
+    });
 
-  describe("callbacks", () => {
     it("fires onConfirm when closing with action='confirm'", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["modal"]);
       const onConfirm = vi.fn();
-      registerDialogCallbacks("modal", { onConfirm });
-      controlDialogs("modal", false, "confirm");
+      const { openDialog, closeDialog } = useDialogControls({ modal: { onConfirm } });
+      openDialog("modal");
+      closeDialog("modal", "confirm");
       expect(onConfirm).toHaveBeenCalledOnce();
     });
 
     it("fires onCancel when closing with action='cancel'", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["modal"]);
       const onCancel = vi.fn();
-      registerDialogCallbacks("modal", { onCancel });
-      controlDialogs("modal", false, "cancel");
+      const { openDialog, closeDialog } = useDialogControls({ modal: { onCancel } });
+      openDialog("modal");
+      closeDialog("modal", "cancel");
       expect(onCancel).toHaveBeenCalledOnce();
     });
 
-    it("does not fire onConfirm when opening (state=true)", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["modal"]);
-      const onConfirm = vi.fn();
-      registerDialogCallbacks("modal", { onConfirm });
-      controlDialogs("modal", true, "confirm");
-      expect(onConfirm).not.toHaveBeenCalled();
-    });
-
-    it("does not fire onCancel when opening (state=true)", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["modal"]);
-      const onCancel = vi.fn();
-      registerDialogCallbacks("modal", { onCancel });
-      controlDialogs("modal", true, "cancel");
-      expect(onCancel).not.toHaveBeenCalled();
-    });
-
     it("does not fire onConfirm when closing without an action", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["modal"]);
       const onConfirm = vi.fn();
-      registerDialogCallbacks("modal", { onConfirm });
-      controlDialogs("modal", false);
+      const { openDialog, closeDialog } = useDialogControls({ modal: { onConfirm } });
+      openDialog("modal");
+      closeDialog("modal");
       expect(onConfirm).not.toHaveBeenCalled();
     });
 
     it("does not fire confirm callback for a different dialog", () => {
-      const { initialiseDialogs, controlDialogs, registerDialogCallbacks } = useDialogControls();
-      initialiseDialogs(["a", "b"]);
       const onConfirm = vi.fn();
-      registerDialogCallbacks("a", { onConfirm });
-      controlDialogs("b", false, "confirm");
+      const { openDialog, closeDialog } = useDialogControls({ a: { onConfirm }, b: {} });
+      openDialog("b");
+      closeDialog("b", "confirm");
       expect(onConfirm).not.toHaveBeenCalled();
     });
   });

package/app/composables/useDialogControls.ts

@@ -1,44 +1,30 @@
-export const useDialogControls = () => {
-  interface DialogConfig {
-    [key: string]: boolean;
-  }
-
-  interface DialogCallbacks {
-    [key: string]: {
-      onConfirm?: () => void;
-      onCancel?: () => void;
-    };
-  }
+type DialogCallbacks = {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+};
 
-  const dialogsConfig = reactive<DialogConfig>({});
-  const dialogCallbacks = reactive<DialogCallbacks>({});
+type DialogsSetupConfig = Record<string, DialogCallbacks>;
 
-  function initialiseDialogs(dialogIds: string[]) {
-    dialogIds.forEach((id) => {
-      dialogsConfig[id] = false;
-    });
-  }
+export const useDialogControls = (config: DialogsSetupConfig = {}) => {
+  const dialogsConfig = reactive<Record<string, boolean>>(
+    Object.fromEntries(Object.keys(config).map((id) => [id, false]))
+  );
 
-  function registerDialogCallbacks(dialogId: string, callbacks: { onConfirm?: () => void; onCancel?: () => void }) {
-    dialogCallbacks[dialogId] = callbacks;
-  }
+  const openDialog = (name: string) => {
+    dialogsConfig[name] = true;
+  };
 
-  const controlDialogs = (name: string, state: boolean, action?: 'confirm' | 'cancel') => {
-    if (!state && action && dialogCallbacks[name]) {
-      // Execute callback before closing dialog
-      if (action === 'confirm' && dialogCallbacks[name].onConfirm) {
-        dialogCallbacks[name].onConfirm!();
-      } else if (action === 'cancel' && dialogCallbacks[name].onCancel) {
-        dialogCallbacks[name].onCancel!();
-      }
+  const closeDialog = (name: string, action?: "confirm" | "cancel") => {
+    if (action && config[name]) {
+      if (action === "confirm") config[name].onConfirm?.();
+      else if (action === "cancel") config[name].onCancel?.();
     }
-    dialogsConfig[name] = state;
+    dialogsConfig[name] = false;
   };
 
   return {
     dialogsConfig,
-    controlDialogs,
-    initialiseDialogs,
-    registerDialogCallbacks,
+    openDialog,
+    closeDialog,
   };
 };

package/app/composables/useFormControl.ts

@@ -6,8 +6,6 @@ import type {
   ICustomErrorMessage,
   IErrorMessagesArr,
 } from "../types/forms/types.forms"
-// import { formFieldC12 } from '@/components/forms/c12/utils';
-
 // export function useFormControl(name: string = '') {
 export function useFormControl(name: string = "") {
   let savedInitialState = {}

package/app/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-layout">
-    <LayoutRow tag="div" variant="full" :style-class-passthrough="['header']">
+    <PageRow tag="div" variant="full" :style-class-passthrough="['header']">
       <template #default>
         <header class="responsive-header">
           <nav class="home-navigation" aria-label="Home Navigation">
@@ -37,17 +37,17 @@
           </ResponsiveHeader>
         </header>
       </template>
-    </LayoutRow>
-    <LayoutRow id="main-content" class="main-content" tag="main" variant="full" :is-landmark="true">
+    </PageRow>
+    <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>
-    </LayoutRow>
-    <LayoutRow id="footer-content" tag="footer" variant="full" :is-landmark="true">
+    </PageRow>
+    <PageRow id="footer-content" tag="footer" variant="full" :is-landmark="true">
       <template #default>
         <p>Footer content here</p>
       </template>
-    </LayoutRow>
+    </PageRow>
   </div>
 </template>
 
@@ -103,8 +103,10 @@ const responsiveNavLinks = {
         { 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: "Layout Row", path: "/ui/layout-row" },
+        { 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" },

package/app/pages/auto-grid.vue

@@ -2,26 +2,27 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
           <h1 class="page-heading-1">AutoGrid</h1>
           <p class="page-body-normal">
             Responsive auto-fit CSS grid wrapper. Columns auto-fit to a minimum width; when
-            <code>is-responsive</code> is enabled, the minimum shifts at container breakpoints via
-            <code>@container</code> queries.
+            <code>is-responsive</code>
+            is enabled, the minimum shifts at container breakpoints via
+            <code>@container</code>
+            queries.
           </p>
-        </LayoutRow>
+        </PageRow>
 
         <div v-if="isDev" class="qa-panel">
           <details class="qa-panel__details">
             <summary class="qa-panel__summary">
               <span class="qa-panel__title">QA — AutoGrid</span>
               <code class="qa-panel__status">
-                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} · default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
+                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} ·
+                default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
               </code>
             </summary>
             <div class="qa-panel__body">
-
               <div class="qa-panel__group">
                 <span class="qa-panel__label">tag</span>
                 <div class="qa-panel__chips">
@@ -31,7 +32,9 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaTag === opt }"
                     @click="qaTag = opt"
-                  >{{ opt }}</button>
+                  >
+                    {{ opt }}
+                  </button>
                 </div>
               </div>
 
@@ -44,7 +47,9 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaIsResponsive === opt }"
                     @click="qaIsResponsive = opt"
-                  >{{ opt ? "on" : "off" }}</button>
+                  >
+                    {{ opt ? "on" : "off" }}
+                  </button>
                 </div>
               </div>
 
@@ -57,7 +62,9 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaMinColSizeSmall === preset }"
                     @click="qaMinColSizeSmall = preset"
-                  >{{ preset }}</button>
+                  >
+                    {{ preset }}
+                  </button>
                 </div>
                 <input v-model="qaMinColSizeSmall" placeholder="e.g. 200px" class="qa-panel__input" />
               </div>
@@ -71,7 +78,9 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaMinColSizeDefault === preset }"
                     @click="qaMinColSizeDefault = preset"
-                  >{{ preset }}</button>
+                  >
+                    {{ preset }}
+                  </button>
                 </div>
                 <input v-model="qaMinColSizeDefault" placeholder="e.g. 300px" class="qa-panel__input" />
               </div>
@@ -85,7 +94,9 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaMinColSizeLarge === preset }"
                     @click="qaMinColSizeLarge = preset"
-                  >{{ preset }}</button>
+                  >
+                    {{ preset }}
+                  </button>
                 </div>
                 <input v-model="qaMinColSizeLarge" placeholder="e.g. 350px" class="qa-panel__input" />
               </div>
@@ -99,16 +110,17 @@
                     class="qa-panel__chip"
                     :class="{ 'is-active': qaGap === preset }"
                     @click="qaGap = preset"
-                  >{{ preset }}</button>
+                  >
+                    {{ preset }}
+                  </button>
                 </div>
                 <input v-model="qaGap" placeholder="e.g. 2rem" class="qa-panel__input" />
               </div>
-
             </div>
           </details>
         </div>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
           <div class="auto-grid-demo-container">
             <AutoGrid
               :tag="qaTag"
@@ -126,8 +138,7 @@
               </template>
             </AutoGrid>
           </div>
-        </LayoutRow>
-
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -230,7 +241,9 @@ const statCards = [
     list-style: none;
     user-select: none;
 
-    &::-webkit-details-marker { display: none; }
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   .qa-panel__title {
@@ -287,7 +300,9 @@ const statCards = [
     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);
@@ -305,7 +320,9 @@ const statCards = [
     border-radius: 0.4rem;
     width: 18rem;
 
-    &::placeholder { opacity: 0.45; }
+    &::placeholder {
+      opacity: 0.45;
+    }
   }
 }
 </style>

package/app/pages/banner-video.vue

@@ -15,7 +15,7 @@
           :style-class-passthrough="['mbe-32']"
         />
 
-        <LayoutRow tag="div" variant="full-width">
+        <PageRow tag="div" variant="full">
           <div class="banner-video-demo-controls">
             <p class="demo-controls__heading">Props</p>
 
@@ -109,7 +109,7 @@
               />
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>