srcdev-nuxt-components 9.1.54 → 9.1.56

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

@@ -2,157 +2,158 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <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>
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Display Dialog</h1>
 
-          <DisplayDialog
-            v-if="dialogsConfig['sample1']"
-            v-model="dialogsConfig['sample1']"
-            variant="dialog"
-            :style-class-passthrough="['your-modifier-class']"
-            :allow-content-scroll="true"
-            data-dialog-id="sample1"
-          >
-            <template #dialogTitle>
-              <p class="text-normal wght-700 m-0">Dialog with scrollable content</p>
-            </template>
+          <div v-if="isDev" class="qa-panel">
+            <details class="qa-panel__details">
+              <summary class="qa-panel__summary">
+                <span class="qa-panel__title">QA — DisplayDialog</span>
+                <code class="qa-panel__status">
+                  {{ qaVariant }} · {{ qaTheme ?? "no theme" }}
+                </code>
+              </summary>
+              <div class="qa-panel__body">
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Variant</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in variants"
+                      :key="opt"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaVariant === opt }"
+                      @click="qaVariant = opt"
+                    >
+                      {{ opt }}
+                    </button>
+                  </div>
+                </div>
 
-            <template #dialogContent>
-              <div class="pt-12 pb-12">
-                <p class="text-normal">
-                  Lorem ipsum odor amet, consectetuer adipiscing elit. Scelerisque tincidunt vestibulum litora torquent
-                  aliquam a. Sem litora tellus mattis nisi vehicula sodales arcu egestas. Consectetur ultrices maximus
-                  pulvinar habitant imperdiet habitasse feugiat. Varius vehicula potenti aliquam mollis efficitur at mus
-                  ridiculus. Nec dis elit euismod posuere etiam fermentum, nisi ante. Pharetra ligula laoreet commodo et
-                  mollis, semper malesuada urna. Id porttitor hendrerit scelerisque justo ridiculus sagittis. Adipiscing
-                  pellentesque eget metus orci; potenti natoque habitasse. Adipiscing leo parturient dis nullam
-                  condimentum id.
-                </p>
-                <p class="text-normal">
-                  Justo molestie felis tellus tellus taciti? Ullamcorper viverra quis felis donec aliquam torquent
-                  imperdiet. Curabitur vitae quis malesuada imperdiet hendrerit felis quam dictum. Aptent curabitur
-                  lacus dapibus; nunc enim vestibulum finibus. Lorem commodo tortor blandit nisl curabitur interdum
-                  ultricies magnis. Dui vehicula ex; congue sagittis commodo tincidunt. Varius sociosqu finibus facilisi
-                  per, vel quisque. Ornare fames cubilia diam maximus habitant nulla nisl. Sollicitudin cubilia inceptos
-                  taciti hac tristique mauris hendrerit vestibulum.
-                </p>
-                <p class="text-normal">
-                  Lobortis efficitur enim litora dictum montes. Sagittis eget etiam curae suspendisse cubilia. Ante
-                  aliquam orci mus ultricies nostra. Ad augue quam egestas ipsum sem lacus tempus. Magnis enim posuere
-                  eros montes fermentum velit. Montes lacinia nisl facilisi volutpat vehicula porttitor auctor
-                  condimentum venenatis. Semper varius nascetur imperdiet laoreet vivamus montes praesent purus nostra.
-                  Magna nascetur augue curae proin nascetur sagittis urna adipiscing.
-                </p>
-                <p class="text-normal">
-                  Venenatis adipiscing integer eget donec ridiculus risus. Nulla quis sollicitudin sem nam bibendum
-                  ligula. Curabitur malesuada platea egestas venenatis in torquent. Eget eros euismod vehicula consequat
-                  at, efficitur ullamcorper. Donec nibh molestie semper nulla vehicula. Vulputate porta euismod cras;
-                  inceptos vel erat. Vehicula urna mattis suscipit iaculis nostra eget. Eleifend vivamus nullam porta
-                  urna nulla dictum praesent aenean. Etiam ipsum placerat bibendum nullam rhoncus egestas. Mollis
-                  pretium nullam nullam donec eget imperdiet.
-                </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 class="qa-panel__group">
+                  <span class="qa-panel__label">Theme</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in themes"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaTheme === opt }"
+                      @click="qaTheme = opt"
+                    >
+                      {{ opt ?? "none" }}
+                    </button>
+                  </div>
+                </div>
               </div>
-            </template>
-            <template #actionButtonLeft>
-              <button type="submit" @click.prevent="closeDialog('sample1', 'cancel')">Cancel</button>
-            </template>
-            <template #actionButtonRight>
-              <button type="submit" @click.prevent="closeDialog('sample1', 'confirm')">Confirm</button>
-            </template>
-          </DisplayDialog>
-        </PageRow>
+            </details>
+          </div>
 
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Confirm Dialog</h2>
-          <p><button type="button" @click.prevent="openDialog('logout')">Show Confirm Dialog</button></p>
+          <p>
+            <button type="button" @click.prevent="openDialog('demo')">Open Dialog</button>
+          </p>
 
           <DisplayDialog
-            v-if="dialogsConfig['logout']"
-            v-model="dialogsConfig['logout']"
-            variant="confirm"
-            :style-class-passthrough="['your-modifier-class']"
-            data-dialog-id="logout"
+            v-if="dialogsConfig['demo']"
+            v-model="dialogsConfig['demo']"
+            :variant="qaVariant"
+            :theme="qaTheme"
+            :allow-content-scroll="qaVariant === 'dialog'"
+            data-dialog-id="demo"
           >
             <template #dialogTitle>
-              <p class="text-normal wght-700 m-0">Confirm logout?</p>
+              <p class="text-normal wght-700 m-0">{{ dialogTitle }}</p>
             </template>
 
             <template #dialogContent>
-              <div class="m-0">
-                <p class="text-normal">Are you sure you wish to log out?</p>
+              <div class="pt-12 pb-12">
+                <p class="text-normal">{{ dialogBody }}</p>
+                <template v-if="qaVariant === 'dialog'">
+                  <p class="text-normal">
+                    Justo molestie felis tellus tellus taciti? Ullamcorper viverra quis felis donec aliquam torquent
+                    imperdiet. Curabitur vitae quis malesuada imperdiet hendrerit felis quam dictum. Aptent curabitur
+                    lacus dapibus; nunc enim vestibulum finibus. Lorem commodo tortor blandit nisl curabitur interdum
+                    ultricies magnis.
+                  </p>
+                  <p class="text-normal">
+                    Lobortis efficitur enim litora dictum montes. Sagittis eget etiam curae suspendisse cubilia. Ante
+                    aliquam orci mus ultricies nostra. Ad augue quam egestas ipsum sem lacus tempus. Magnis enim posuere
+                    eros montes fermentum velit.
+                  </p>
+                  <p class="text-normal">
+                    Venenatis adipiscing integer eget donec ridiculus risus. Nulla quis sollicitudin sem nam bibendum
+                    ligula. Curabitur malesuada platea egestas venenatis in torquent. Eget eros euismod vehicula consequat
+                    at, efficitur ullamcorper.
+                  </p>
+                </template>
               </div>
             </template>
+
             <template #actionButtonLeft>
-              <button type="submit" @click.prevent="closeDialog('logout', 'cancel')">Cancel</button>
+              <button type="button" @click.prevent="closeDialog('demo', 'cancel')">Cancel</button>
             </template>
             <template #actionButtonRight>
-              <button type="submit" @click.prevent="closeDialog('logout', 'confirm')">Confirm</button>
+              <button type="button" @click.prevent="closeDialog('demo', 'confirm')">{{ confirmLabel }}</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>
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Nested dialog pattern</h2>
+          <p class="text-normal">
+            A dialog managing its own internal confirm sub-dialog via a local
+            <code>useDialogControls</code> instance. Tick "Simulate unsaved changes" before
+            clicking Cancel to trigger the nested confirm.
+          </p>
+          <p>
+            <button type="button" @click.prevent="openNestedDialog('editProfile')">Open nested dialog demo</button>
+          </p>
 
           <DisplayDialog
-            v-if="dialogsConfig['deleteAccount']"
-            v-model="dialogsConfig['deleteAccount']"
-            variant="alert"
-            :style-class-passthrough="['your-modifier-class']"
-            data-dialog-id="deleteAccount"
+            v-if="nestedDialogsConfig['editProfile']"
+            v-model="nestedDialogsConfig['editProfile']"
+            variant="dialog"
+            data-dialog-id="nested-edit"
           >
             <template #dialogTitle>
-              <p class="text-normal wght-700 m-0">Delete account?</p>
+              <p class="text-normal wght-700 m-0">Edit profile</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 class="pt-12 pb-12 nested-demo-content">
+                <p class="text-normal">Make some changes below, then click Cancel to trigger the nested confirm dialog.</p>
+                <label class="nested-demo-label">
+                  <input v-model="nestedHasChanges" type="checkbox" />
+                  Simulate unsaved changes
+                </label>
               </div>
             </template>
             <template #actionButtonLeft>
-              <button type="button" @click.prevent="closeDialog('deleteAccount', 'cancel')">Cancel</button>
+              <button type="button" @click="handleNestedCancel">Cancel</button>
             </template>
             <template #actionButtonRight>
-              <button type="button" @click.prevent="closeDialog('deleteAccount', 'confirm')">Delete account</button>
+              <button type="button" @click="closeNestedDialog('editProfile', 'confirm')">Save</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"
+            v-if="nestedDialogsConfig['confirmDiscard']"
+            v-model="nestedDialogsConfig['confirmDiscard']"
+            variant="confirm"
+            theme="warning"
+            :lock-viewport="false"
+            data-dialog-id="nested-confirm"
           >
             <template #dialogTitle>
-              <p class="text-normal wght-700 m-0">Fullscreen dialog</p>
+              <p class="text-normal wght-700 m-0">Discard changes?</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 class="m-0">
+                <p class="text-normal">Your unsaved changes will be lost.</p>
               </div>
             </template>
             <template #actionButtonLeft>
-              <button type="button" @click.prevent="closeDialog('fullscreen', 'cancel')">Cancel</button>
+              <button type="button" @click="closeNestedDialog('confirmDiscard', 'cancel')">Keep editing</button>
             </template>
             <template #actionButtonRight>
-              <button type="button" @click.prevent="closeDialog('fullscreen', 'confirm')">Done</button>
+              <button type="button" @click="closeNestedDialog('confirmDiscard', 'confirm')">Discard</button>
             </template>
           </DisplayDialog>
         </PageRow>
@@ -162,35 +163,182 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
+import type { SemanticTheme } from "~/types/components";
+
+definePageMeta({ layout: false });
 
 useHead({
   title: "UI Dialogs",
   meta: [{ name: "description", content: "Examples of Dialogs" }],
-  bodyAttrs: {
-    class: "home",
-  },
+  bodyAttrs: { class: "displayDialog-page" },
+});
+
+const isDev = import.meta.dev;
+
+const variants = ["dialog", "modal", "confirm", "alert", "fullscreen"] as const;
+type DialogVariant = (typeof variants)[number];
+
+const themes = [undefined, "info", "success", "warning", "error"] as const;
+
+const qaVariant = ref<DialogVariant>("confirm");
+const qaTheme = ref<SemanticTheme | undefined>(undefined);
+
+const dialogTitle = computed(() => {
+  if (qaTheme.value === "error") return "Delete account?";
+  if (qaTheme.value === "warning") return "Confirm action";
+  if (qaVariant.value === "dialog") return "Dialog with scrollable content";
+  if (qaVariant.value === "confirm") return "Confirm logout?";
+  if (qaVariant.value === "alert") return "Alert — action required";
+  if (qaVariant.value === "fullscreen") return "Fullscreen dialog";
+  return "Dialog";
+});
+
+const dialogBody = computed(() => {
+  if (qaTheme.value === "error")
+    return "This action is permanent and cannot be undone. All your data will be removed.";
+  if (qaVariant.value === "alert")
+    return "Cannot be dismissed by clicking outside or pressing Escape — an explicit action is required.";
+  if (qaVariant.value === "fullscreen")
+    return "This dialog fills the entire viewport. Useful for immersive flows such as onboarding, image editors, or multi-step wizards.";
+  if (qaVariant.value === "dialog")
+    return "Lorem ipsum odor amet, consectetuer adipiscing elit. Scelerisque tincidunt vestibulum litora torquent aliquam a. Sem litora tellus mattis nisi vehicula sodales arcu egestas.";
+  return "Are you sure you want to continue? This will apply the selected action.";
+});
+
+const confirmLabel = computed(() => {
+  if (qaTheme.value === "error") return "Delete account";
+  if (qaVariant.value === "confirm") return "Log out";
+  return "Confirm";
 });
 
 const { dialogsConfig, openDialog, closeDialog } = useDialogControls({
-  sample1: {
-    onConfirm: () => console.log("Sample1 dialog confirmed"),
-    onCancel: () => console.log("Sample1 dialog cancelled"),
-  },
-  logout: {
-    onConfirm: () => console.log("User logged out"),
-    onCancel: () => console.log("Logout cancelled"),
-  },
-  deleteAccount: {
-    onConfirm: () => console.log("Account deleted"),
-    onCancel: () => console.log("Delete account cancelled"),
+  demo: {
+    onConfirm: () => {},
+    onCancel: () => {},
   },
-  fullscreen: {
-    onConfirm: () => console.log("Fullscreen dialog confirmed"),
-    onCancel: () => console.log("Fullscreen dialog cancelled"),
+});
+
+const nestedHasChanges = ref(false);
+
+const { dialogsConfig: nestedDialogsConfig, openDialog: openNestedDialog, closeDialog: closeNestedDialog } = useDialogControls({
+  editProfile: { onConfirm: () => {}, onCancel: () => {} },
+  confirmDiscard: {
+    onConfirm: () => { nestedDialogsConfig.editProfile = false; },
+    onCancel: () => {},
   },
 });
+
+const handleNestedCancel = () => {
+  if (nestedHasChanges.value) {
+    openNestedDialog("confirmDiscard");
+  } else {
+    closeNestedDialog("editProfile", "cancel");
+  }
+};
 </script>
 
+<style lang="css">
+.displayDialog-page {
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+    margin-block: 1.2rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .nested-demo-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+
+  .nested-demo-label {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    cursor: pointer;
+    font-size: 1.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
+}
+</style>