@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroDialog/FuroDialog.vue

@@ -0,0 +1,362 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Dialog as RekaDialog,
+} from 'reka-ui/namespaced'
+
+import FuroDialogContext from './FuroDialogContext.js'
+
+export default defineComponent({
+  name: 'FuroDialog',
+
+  components: {
+    DialogRoot: RekaDialog['Root'],
+    DialogTrigger: RekaDialog['Trigger'],
+    DialogPortal: RekaDialog['Portal'],
+    DialogOverlay: RekaDialog['Overlay'],
+    DialogContent: RekaDialog['Content'],
+    DialogTitle: RekaDialog['Title'],
+    DialogDescription: RekaDialog['Description'],
+    DialogClose: RekaDialog['Close'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroDialogContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroDialogContext.js').FuroDialogSlots} */ (Object),
+  emits: FuroDialogContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroDialogContext.js').FuroDialogSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroDialogContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      $attrs.class,
+      context.extractRootClassNames(),
+    ]"
+    :style="$attrs.style"
+  >
+    <DialogRoot
+      v-bind="context.extractRootAttributes()"
+      :open="context.extractOpenValue()"
+      @update:open="context.onOpenChange({
+        isOpen: $event,
+      })"
+    >
+      <DialogTrigger
+        v-if="Object.hasOwn($slots, 'trigger')"
+        as-child
+        :disabled="context.isDisabled()"
+      >
+        <slot name="trigger" />
+      </DialogTrigger>
+
+      <DialogPortal>
+        <DialogOverlay
+          v-if="context.isModal()"
+          class="unit-dialog-overlay"
+        />
+
+        <DialogContent
+          :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">
+            <DialogTitle class="title">
+              <slot name="title">
+                {{ context.extractTitle() }}
+              </slot>
+            </DialogTitle>
+
+            <DialogDescription
+              v-if="context.hasDescription()"
+              class="description"
+            >
+              <slot name="description">
+                {{ context.extractDescription() }}
+              </slot>
+            </DialogDescription>
+          </header>
+
+          <div class="body">
+            <slot :close="() => context.requestClose()" />
+          </div>
+
+          <footer
+            v-if="Object.hasOwn($slots, 'footer')"
+            class="footer"
+          >
+            <slot
+              name="footer"
+              :close="() => context.requestClose()"
+            />
+          </footer>
+
+          <DialogClose
+            class="built-in-close"
+            :aria-label="context.extractCloseText()"
+            :disabled="context.isBusy()"
+          >
+            <slot name="close">
+              ✕
+            </slot>
+          </DialogClose>
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-dialog.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-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-dialog-overlay[data-state="open"] {
+    animation: furo-dialog-overlay-in 150ms ease;
+  }
+
+  .unit-dialog-overlay[data-state="closed"] {
+    animation: furo-dialog-overlay-out 120ms ease;
+  }
+
+  .unit-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), 28rem);
+    max-height: calc(100dvh - 2rem);
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-large);
+
+    padding-block: 1rem;
+    padding-inline: 1rem;
+
+    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-dialog-content.sm {
+    width: min(calc(100vw - 2rem), 22rem);
+  }
+
+  .unit-dialog-content.lg {
+    width: min(calc(100vw - 2rem), 40rem);
+  }
+
+  .unit-dialog-content.fullscreen {
+    width: calc(100vw - 2rem);
+    height: calc(100dvh - 2rem);
+    max-height: calc(100dvh - 2rem);
+  }
+
+  .unit-dialog-content.busy {
+    cursor: progress;
+  }
+
+  .unit-dialog-content[data-state="open"] {
+    animation: furo-dialog-content-in 160ms ease;
+  }
+
+  .unit-dialog-content[data-state="closed"] {
+    animation: furo-dialog-content-out 130ms ease;
+  }
+
+  .unit-dialog-content:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-dialog-content > .header {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-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-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-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-dialog-content > .footer {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--size-space-small);
+  }
+
+  .unit-dialog-content > .built-in-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.75rem;
+    height: 1.75rem;
+
+    border: none;
+    border-radius: var(--size-border-radius-small);
+
+    background-color: transparent;
+    color: var(--color-muted-foreground);
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color;
+  }
+
+  .unit-dialog-content > .built-in-close:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-dialog-content > .built-in-close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-dialog-content > .built-in-close:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  @keyframes furo-dialog-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes furo-dialog-overlay-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes furo-dialog-content-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes furo-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-dialog-overlay[data-state="open"],
+    .unit-dialog-overlay[data-state="closed"],
+    .unit-dialog-content[data-state="open"],
+    .unit-dialog-content[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+</style>