srcdev-nuxt-components 9.1.48 → 9.1.50

package/app/components/01.atoms/display-dialog/DisplayDialog.vue

@@ -0,0 +1,277 @@
+<template>
+  <dialog
+    class="display-dialog"
+    :class="[elementClasses]"
+    :role="isAlert ? 'alertdialog' : 'dialog'"
+    :align-dialog
+    :justify-dialog
+    :open
+    :data-dialog-id="dataDialogId"
+  >
+    <focus-trap
+      v-model:active="open"
+      :escape-deactivates="!isAlert"
+      :click-outside-deactivates="!isAlert"
+      @deactivate="closeDialog()"
+    >
+      <div class="inner" :class="[variant]">
+        <div class="header">
+          <div v-if="hasTitle" class="col-left">
+            <slot name="dialogTitle"></slot>
+          </div>
+
+          <div class="col-right">
+            <button
+              data-test-id="display-dialog-header-close"
+              class="display-prompt-action"
+              @click.prevent="closeDialog()"
+            >
+              <Icon name="bitcoin-icons:cross-filled" class="icon" />
+              <span class="sr-only">Close</span>
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="hasContent"
+          class="dialog-content"
+          :class="[{ 'allow-content-scroll': allowContentScroll }]"
+        >
+          <slot name="dialogContent"></slot>
+        </div>
+        <div v-if="hasFooter" class="footer">
+          <slot name="actionButtonLeft"></slot>
+          <slot name="actionButtonRight"></slot>
+        </div>
+      </div>
+    </focus-trap>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { FocusTrap } from "focus-trap-vue";
+interface Props {
+  styleClassPassthrough?: string | string[];
+  variant?: "dialog" | "modal" | "confirm" | "alert" | "fullscreen";
+  justifyDialog?: "start" | "center" | "end";
+  alignDialog?: "start" | "center" | "end";
+  lockViewport?: boolean;
+  allowContentScroll?: boolean;
+  dataDialogId: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+  variant: "dialog",
+  justifyDialog: "center",
+  alignDialog: "center",
+  lockViewport: true,
+  allowContentScroll: false,
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const isAlert = computed(() => props.variant === "alert");
+
+const open = defineModel<boolean>();
+
+const closeDialog = () => {
+  open.value = false;
+  if (props.lockViewport) {
+    document.body.classList.remove("lock");
+  }
+};
+
+const slots = useSlots();
+const hasTitle = computed(() => !!slots.dialogTitle);
+const hasContent = computed(() => !!slots.dialogContent);
+const hasFooter = computed(() => !!(slots.actionButtonLeft || slots.actionButtonRight));
+
+onMounted(() => {
+  if (props.lockViewport) {
+    document.body.classList.add("lock");
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .display-dialog {
+    --_backdrop-blur: var(--display-dialog-backdrop-blur, blur(0.5rem));
+    --_backdrop-background: var(--display-dialog-backdrop-background, rgba(0, 0, 0, 0.5));
+    --_z-index: var(--display-dialog-z-index, 999999);
+    --_transition-duration: var(--display-dialog-transition-duration, 200ms);
+
+    --_inner-border-radius: var(--display-dialog-inner-border-radius, 0.8rem);
+    --_inner-border: var(--display-dialog-inner-border, 0.1rem solid light-dark(var(--slate-10), var(--slate-02)));
+    --_inner-outline: var(--display-dialog-inner-outline, 0.1rem solid light-dark(var(--slate-10), var(--slate-00)));
+    --_inner-background: var(--display-dialog-inner-background, light-dark(var(--slate-00), var(--slate-10)));
+
+    --_header-padding: var(--display-dialog-header-padding, 1.2rem);
+    --_header-button-margin: var(--display-dialog-header-button-margin, 0);
+    --_header-button-padding: var(--display-dialog-header-button-padding, 0.4rem);
+    --_header-button-border: var(--display-dialog-header-button-border, 0.1rem solid transparent);
+    --_header-button-border-radius: var(--display-dialog-header-button-border-radius, 0.4rem);
+    --_header-button-outline: var(--display-dialog-header-button-outline, 0.1rem solid transparent);
+    --_header-button-border-hover: var(--display-dialog-header-button-border-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
+    --_header-button-outline-hover: var(--display-dialog-header-button-outline-hover, 0.1rem solid light-dark(var(--slate-08), var(--slate-04)));
+    --_header-button-icon-color: var(--display-dialog-header-button-icon-color, light-dark(var(--slate-09), var(--slate-02)));
+    --_header-button-icon-size: var(--display-dialog-header-button-icon-size, 2.4rem);
+
+    --_content-padding: var(--display-dialog-content-padding, 1.2rem);
+    --_footer-gap: var(--display-dialog-footer-gap, 1.2rem);
+    --_footer-padding: var(--display-dialog-footer-padding, 1.2rem);
+
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: var(--_backdrop-blur);
+    background-color: var(--_backdrop-background);
+    z-index: var(--_z-index);
+    opacity: 0;
+    border: none;
+    padding: 0;
+
+    display: none;
+    transition:
+      opacity var(--_transition-duration),
+      display var(--_transition-duration),
+      overlay var(--_transition-duration);
+    transition-behavior: allow-discrete;
+
+    &[open] {
+      display: flex;
+      opacity: 1;
+
+      @starting-style {
+        display: flex;
+        opacity: 0;
+      }
+    }
+
+    &[justify-dialog="start"] {
+      justify-content: flex-start;
+    }
+
+    &[justify-dialog="center"] {
+      justify-content: center;
+    }
+
+    &[justify-dialog="end"] {
+      justify-content: flex-end;
+    }
+
+    &[align-dialog="start"] {
+      align-items: flex-start;
+    }
+
+    &[align-dialog="center"] {
+      align-items: center;
+    }
+
+    &[align-dialog="end"] {
+      align-items: flex-end;
+    }
+
+    .inner {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      border-radius: var(--_inner-border-radius);
+      border: var(--_inner-border);
+      outline: var(--_inner-outline);
+      background-color: var(--_inner-background);
+      height: initial;
+      width: 100vw;
+      overflow: hidden;
+
+      &.alert {
+        width: min(90%, 48rem);
+      }
+
+      &.confirm {
+        width: initial;
+      }
+
+      &.dialog {
+        height: 70dvh;
+        width: min(75%, 72rem);
+      }
+
+      &.fullscreen {
+        --_inner-border-radius: 0;
+        --_inner-border: none;
+        --_inner-outline: none;
+        width: 100%;
+        height: 100%;
+      }
+
+      &.modal {
+        width: initial;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        padding: var(--_header-padding);
+
+        .col-left {
+          flex: 1;
+        }
+
+        .col-right {
+          margin-inline-start: auto;
+
+          .display-prompt-action {
+            background-color: transparent;
+            display: block flex;
+            align-items: center;
+            justify-content: center;
+            margin: var(--_header-button-margin);
+            padding: var(--_header-button-padding);
+            border: var(--_header-button-border);
+            border-radius: var(--_header-button-border-radius);
+            outline: var(--_header-button-outline);
+
+            transition:
+              border-color var(--_transition-duration),
+              outline-color var(--_transition-duration);
+
+            &:hover,
+            &:focus-visible {
+              cursor: pointer;
+              border: var(--_header-button-border-hover);
+              outline: var(--_header-button-outline-hover);
+            }
+
+            .icon {
+              color: var(--_header-button-icon-color);
+              display: block;
+              font-size: var(--_header-button-icon-size);
+            }
+          }
+        }
+      }
+
+      .dialog-content {
+        overflow: hidden;
+        padding: var(--_content-padding);
+
+        &.allow-content-scroll {
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        }
+      }
+
+      .footer {
+        display: flex;
+        gap: var(--_footer-gap);
+        justify-content: flex-end;
+        padding: var(--_footer-padding);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/display-dialog/stories/DisplayDialog.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../DisplayDialog.vue";
+
+type StoryArgs = {
+  variant: "dialog" | "modal" | "confirm" | "alert" | "fullscreen";
+  allowContentScroll: boolean;
+  justifyDialog: "start" | "center" | "end";
+  alignDialog: "start" | "center" | "end";
+};
+
+export default {
+  title: "Atoms/DisplayDialog",
+  component: StorybookComponent,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["dialog", "modal", "confirm", "alert", "fullscreen"],
+      description: "Controls sizing, shape, and ARIA role of the dialog panel",
+      table: { category: "Appearance" },
+    },
+    allowContentScroll: {
+      control: { type: "boolean" },
+      description: "Allow the content area to scroll independently",
+      table: { category: "Behaviour" },
+    },
+    justifyDialog: {
+      control: { type: "inline-radio" },
+      options: ["start", "center", "end"],
+      description: "Horizontal position of the dialog panel within the overlay",
+      table: { category: "Layout" },
+    },
+    alignDialog: {
+      control: { type: "inline-radio" },
+      options: ["start", "center", "end"],
+      description: "Vertical position of the dialog panel within the overlay",
+      table: { category: "Layout" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+    lockViewport: { table: { disable: true } },
+    dataDialogId: { table: { disable: true } },
+  },
+  args: {
+    variant: "dialog",
+    allowContentScroll: false,
+    justifyDialog: "center",
+    alignDialog: "center",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A dialog overlay with header, scrollable content, and footer action slots. Supports `dialog`, `confirm`, `alert`, `modal`, and `fullscreen` variants. The `alert` variant sets `role=alertdialog` and disables dismiss-on-outside-click and Escape.",
+      },
+    },
+  },
+} as Meta<StoryArgs>;
+
+const triggerButtonStyles =
+  "padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: 0.1rem solid currentColor; background: transparent; cursor: pointer; font-size: 1.4rem;";
+
+const actionButtonStyles =
+  "padding: 0.8rem 1.6rem; border-radius: 0.4rem; border: 0.1rem solid currentColor; background: transparent; cursor: pointer; font-size: 1.4rem;";
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const open = ref(false);
+    return { args, open };
+  },
+  template: `
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <button :style="'${triggerButtonStyles}'" @click="open = true">Open dialog</button>
+      <StorybookComponent
+        v-model="open"
+        :variant="args.variant"
+        :allow-content-scroll="args.allowContentScroll"
+        :justify-dialog="args.justifyDialog"
+        :align-dialog="args.alignDialog"
+        :lock-viewport="false"
+        data-dialog-id="storybook-dialog"
+      >
+        <template #dialogTitle>
+          <p style="margin: 0; font-weight: 700; font-size: 1.6rem;">Dialog title</p>
+        </template>
+        <template #dialogContent>
+          <p style="margin: 0; line-height: 1.6;">
+            This is the dialog content area. It accepts any markup via the
+            <code>#dialogContent</code> slot.
+          </p>
+        </template>
+        <template #actionButtonLeft>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Cancel</button>
+        </template>
+        <template #actionButtonRight>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Confirm</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+const ScrollableTemplate: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const open = ref(false);
+    return { args, open };
+  },
+  template: `
+    <div style="padding: 4rem; display: flex; justify-content: center;">
+      <button :style="'${triggerButtonStyles}'" @click="open = true">Open dialog</button>
+      <StorybookComponent
+        v-model="open"
+        variant="dialog"
+        :allow-content-scroll="true"
+        :lock-viewport="false"
+        data-dialog-id="storybook-scrollable"
+      >
+        <template #dialogTitle>
+          <p style="margin: 0; font-weight: 700; font-size: 1.6rem;">Scrollable content</p>
+        </template>
+        <template #dialogContent>
+          <div style="padding: 1.2rem 0;">
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Lorem ipsum odor amet, consectetuer adipiscing elit. Scelerisque tincidunt vestibulum litora torquent aliquam a. Sem litora tellus mattis nisi vehicula sodales arcu egestas.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Justo molestie felis tellus tellus taciti? Ullamcorper viverra quis felis donec aliquam torquent imperdiet. Curabitur vitae quis malesuada imperdiet hendrerit felis quam dictum.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Lobortis efficitur enim litora dictum montes. Sagittis eget etiam curae suspendisse cubilia. Ante aliquam orci mus ultricies nostra.</p>
+            <p style="margin: 0 0 1.6rem; line-height: 1.6;">Venenatis adipiscing integer eget donec ridiculus risus. Nulla quis sollicitudin sem nam bibendum ligula. Curabitur malesuada platea egestas venenatis in torquent.</p>
+            <p style="margin: 0; line-height: 1.6;">Curae maximus nam tortor porta sodales at, feugiat iaculis integer. Lacus habitasse odio fames natoque neque varius nostra.</p>
+          </div>
+        </template>
+        <template #actionButtonLeft>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Cancel</button>
+        </template>
+        <template #actionButtonRight>
+          <button :style="'${actionButtonStyles}'" @click="open = false">Confirm</button>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = { variant: "dialog" };
+
+export const Confirm = Template.bind({});
+Confirm.args = { variant: "confirm" };
+Confirm.parameters = {
+  docs: {
+    description: { story: "Compact dialog sized to its content. Use for simple yes/no confirmations." },
+  },
+};
+
+export const Alert = Template.bind({});
+Alert.args = { variant: "alert" };
+Alert.parameters = {
+  docs: {
+    description: {
+      story:
+        "Sets `role=alertdialog`. Escape and outside-click are both disabled — the user must take explicit action via the footer buttons.",
+    },
+  },
+};
+
+export const Fullscreen = Template.bind({});
+Fullscreen.args = { variant: "fullscreen" };
+Fullscreen.parameters = {
+  docs: {
+    description: { story: "Fills the entire viewport. No border or border-radius. Useful for immersive multi-step flows." },
+  },
+};
+
+export const ScrollableContent = ScrollableTemplate.bind({});
+ScrollableContent.parameters = {
+  docs: {
+    description: { story: "Content area scrolls independently when it overflows the fixed-height dialog panel." },
+  },
+};