@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroAlertDialog/FuroAlertDialog.vue

@@ -0,0 +1,324 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  AlertDialog as RekaAlertDialog,
+} from 'reka-ui/namespaced'
+
+import FuroButton from '../../atoms/FuroButton/FuroButton.vue'
+
+import FuroAlertDialogContext from './FuroAlertDialogContext.js'
+
+export default defineComponent({
+  name: 'FuroAlertDialog',
+
+  components: {
+    FuroButton,
+    AlertDialogRoot: RekaAlertDialog['Root'],
+    AlertDialogTrigger: RekaAlertDialog['Trigger'],
+    AlertDialogPortal: RekaAlertDialog['Portal'],
+    AlertDialogOverlay: RekaAlertDialog['Overlay'],
+    AlertDialogContent: RekaAlertDialog['Content'],
+    AlertDialogTitle: RekaAlertDialog['Title'],
+    AlertDialogDescription: RekaAlertDialog['Description'],
+    AlertDialogAction: RekaAlertDialog['Action'],
+    AlertDialogCancel: RekaAlertDialog['Cancel'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroAlertDialogContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroAlertDialogContext.js').FuroAlertDialogSlots} */ (Object),
+  emits: FuroAlertDialogContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroAlertDialogContext.js').FuroAlertDialogSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroAlertDialogContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      $attrs.class,
+      context.extractRootClassNames(),
+    ]"
+    :style="$attrs.style"
+  >
+    <AlertDialogRoot
+      v-bind="context.extractRootAttributes()"
+      :open="context.extractOpenValue()"
+      @update:open="context.onOpenChange({
+        isOpen: $event,
+      })"
+    >
+      <AlertDialogTrigger
+        v-if="Object.hasOwn($slots, 'trigger')"
+        as-child
+        :disabled="context.isDisabled()"
+      >
+        <slot name="trigger" />
+      </AlertDialogTrigger>
+
+      <AlertDialogPortal>
+        <AlertDialogOverlay class="unit-alert-dialog-overlay" />
+
+        <AlertDialogContent
+          :class="context.extractContentClassNames()"
+          @interact-outside="context.onInteractOutside({
+            rawEvent: $event,
+          })"
+          @escape-key-down="context.onEscapeKeyDown({
+            rawEvent: $event,
+          })"
+          @open-auto-focus="context.onOpenAutoFocus({
+            rawEvent: $event,
+          })"
+        >
+          <header class="header">
+            <AlertDialogTitle class="title">
+              <slot name="title">
+                {{ context.extractTitle() }}
+              </slot>
+            </AlertDialogTitle>
+
+            <AlertDialogDescription
+              v-if="context.hasDescription()"
+              class="description"
+            >
+              <slot name="description">
+                {{ context.extractDescription() }}
+              </slot>
+            </AlertDialogDescription>
+          </header>
+
+          <div
+            v-if="Object.hasOwn($slots, 'default')"
+            class="body"
+          >
+            <slot />
+          </div>
+
+          <footer class="footer">
+            <slot
+              name="footer"
+              :confirm="() => context.onConfirm()"
+              :cancel="() => context.onCancel()"
+            >
+              <AlertDialogCancel as-child>
+                <FuroButton
+                  :parcel="context.generateCancelButtonParcel()"
+                  @click="context.onCancel()"
+                >
+                  {{ context.extractCancelText() }}
+                </FuroButton>
+              </AlertDialogCancel>
+
+              <AlertDialogAction as-child>
+                <FuroButton
+                  :parcel="context.generateConfirmButtonParcel()"
+                  @click="context.onConfirm()"
+                >
+                  {{ context.extractConfirmText() }}
+                </FuroButton>
+              </AlertDialogAction>
+            </slot>
+          </footer>
+        </AlertDialogContent>
+      </AlertDialogPortal>
+    </AlertDialogRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-alert-dialog.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-alert-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--value-z-index-layer-overlay);
+
+    background-color: var(--furo-dialog-overlay-background);
+
+    will-change: opacity;
+  }
+
+  .unit-alert-dialog-overlay[data-state="open"] {
+    animation: furo-alert-dialog-overlay-in 150ms ease;
+  }
+
+  .unit-alert-dialog-overlay[data-state="closed"] {
+    animation: furo-alert-dialog-overlay-out 120ms ease;
+  }
+
+  .unit-alert-dialog-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: calc(var(--value-z-index-layer-overlay) + 1);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+
+    width: min(calc(100vw - 2rem), 26rem);
+    max-height: calc(100dvh - 2rem);
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-large);
+
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+
+    overflow: hidden;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+
+    transform: translate(-50%, -50%);
+  }
+
+  .unit-alert-dialog-content.sm {
+    width: min(calc(100vw - 2rem), 22rem);
+  }
+
+  .unit-alert-dialog-content.lg {
+    width: min(calc(100vw - 2rem), 34rem);
+  }
+
+  .unit-alert-dialog-content.busy {
+    cursor: progress;
+  }
+
+  .unit-alert-dialog-content[data-state="open"] {
+    animation: furo-alert-dialog-content-in 160ms ease;
+  }
+
+  .unit-alert-dialog-content[data-state="closed"] {
+    animation: furo-alert-dialog-content-out 130ms ease;
+  }
+
+  .unit-alert-dialog-content:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-alert-dialog-content > .header {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-alert-dialog-content > .header > .title {
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: var(--font-line-height-body, 1.4);
+  }
+
+  .unit-alert-dialog-content > .header > .description {
+    color: var(--color-muted-foreground);
+    font-size: var(--font-size-small);
+    line-height: var(--font-line-height-body, 1.4);
+  }
+
+  .unit-alert-dialog-content > .body {
+    flex: 1 1 auto;
+
+    min-height: 0;
+
+    overflow-y: auto;
+
+    font-size: var(--font-size);
+    line-height: var(--font-line-height-body, 1.4);
+  }
+
+  .unit-alert-dialog-content > .footer {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--size-space-small);
+  }
+
+  @keyframes furo-alert-dialog-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes furo-alert-dialog-overlay-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes furo-alert-dialog-content-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes furo-alert-dialog-content-out {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.97);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-alert-dialog-overlay[data-state="open"],
+    .unit-alert-dialog-overlay[data-state="closed"],
+    .unit-alert-dialog-content[data-state="open"],
+    .unit-alert-dialog-content[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+</style>