@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroToast/FuroToast.vue

@@ -0,0 +1,624 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Toast as RekaToast,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroToastContext from './FuroToastContext.js'
+
+export default defineComponent({
+  name: 'FuroToast',
+
+  components: {
+    FuroIcon,
+    ToastProvider: RekaToast['Provider'],
+    ToastViewport: RekaToast['Viewport'],
+    ToastRoot: RekaToast['Root'],
+    ToastTitle: RekaToast['Title'],
+    ToastDescription: RekaToast['Description'],
+    ToastClose: RekaToast['Close'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroToastContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroToastContext.js').FuroToastSlots} */ (Object),
+  emits: FuroToastContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroToastContext.js').FuroToastSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroToastContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <ToastProvider v-bind="context.extractProviderAttributes()">
+    <ToastRoot
+      v-for="toast in context.createToastViewModels()"
+      :key="toast.key"
+      :class="context.extractToastClassNames({
+        type: toast.type,
+      })"
+      :style="context.extractToastStyle({
+        viewModel: toast,
+      })"
+      :data-front="toast.isFront"
+      :data-expanded="context.isExpanded()"
+      :data-mounted="toast.isMounted"
+      v-bind="context.extractToastRootAttributes({
+        toast,
+      })"
+      @update:open="context.onToastOpenChange({
+        key: toast.key,
+        isOpen: $event,
+      })"
+    >
+      <div
+        :ref="context.getToastElementRef({
+          key: toast.key,
+        })"
+        class="inner"
+      >
+        <slot
+          name="icon"
+          :toast="toast"
+        >
+          <FuroIcon
+            class="icon"
+            :name="context.extractToastIconName({
+              type: toast.type,
+            })"
+            aria-hidden="true"
+          />
+        </slot>
+
+        <div class="content">
+          <ToastTitle
+            v-if="context.shouldRenderToastTitle({
+              toast,
+            })"
+            class="title"
+          >
+            <slot
+              name="title"
+              :toast="toast"
+            >
+              {{ toast.title }}
+            </slot>
+          </ToastTitle>
+
+          <ToastDescription
+            v-if="context.shouldRenderToastDescription({
+              toast,
+            })"
+            class="description"
+          >
+            <slot
+              name="description"
+              :toast="toast"
+            >
+              {{ toast.description }}
+            </slot>
+          </ToastDescription>
+        </div>
+
+        <div
+          v-if="toast.hasActions"
+          class="actions"
+        >
+          <button
+            v-for="action in toast.actions"
+            :key="action.actionKey"
+            type="button"
+            class="action"
+            :disabled="toast.actionPending"
+            @click="context.onActionClick({
+              key: toast.key,
+              actionKey: action.actionKey,
+            })"
+          >
+            <slot
+              v-if="toast.actionPending"
+              name="action-spinner"
+              :toast="toast"
+              :action="action"
+            >
+              <FuroIcon
+                class="action-spinner"
+                name="ph:circle-notch"
+                aria-hidden="true"
+              />
+            </slot>
+
+            {{ action.label }}
+          </button>
+        </div>
+      </div>
+
+      <ToastClose
+        class="built-in-close"
+        :aria-label="toast.closeText"
+      >
+        <slot
+          name="close-icon"
+          :toast="toast"
+        >
+          <FuroIcon
+            name="ph:x"
+            aria-hidden="true"
+          />
+        </slot>
+      </ToastClose>
+    </ToastRoot>
+
+    <ToastViewport
+      :class="context.extractViewportClassNames()"
+      :style="context.extractViewportStyle()"
+      v-bind="context.extractViewportAttributes()"
+      @mouseenter="context.onStackExpand()"
+      @mouseleave="context.onStackCollapse()"
+      @focusin="context.onStackExpand()"
+      @focusout="context.onStackCollapse()"
+    />
+  </ToastProvider>
+</template>
+
+<style>
+@layer furo {
+  .unit-toast-viewport {
+    position: fixed;
+    z-index: var(--value-z-index-layer-overlay);
+
+    width: var(--furo-toast-width, 22rem);
+    max-width: calc(100vw - 2rem);
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+    outline: none;
+
+    pointer-events: none;
+  }
+
+  .unit-toast-viewport.top-left {
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+
+  .unit-toast-viewport.top-center {
+    top: 1.5rem;
+    left: 50%;
+
+    transform: translateX(-50%);
+  }
+
+  .unit-toast-viewport.top-right {
+    top: 1.5rem;
+    right: 1.5rem;
+  }
+
+  .unit-toast-viewport.bottom-left {
+    bottom: 1.5rem;
+    left: 1.5rem;
+  }
+
+  .unit-toast-viewport.bottom-center {
+    bottom: 1.5rem;
+    left: 50%;
+
+    transform: translateX(-50%);
+  }
+
+  .unit-toast-viewport.bottom-right {
+    bottom: 1.5rem;
+    right: 1.5rem;
+  }
+
+  .unit-toast {
+    --furo-toast-gap: 0.875rem;
+    --furo-toast-y: translateY(calc(var(--furo-toast-lift) * -100%));
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: var(--furo-toast-z, 1);
+
+    width: 100%;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-medium);
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+
+    opacity: 0;
+
+    transform: var(--furo-toast-y);
+
+    pointer-events: auto;
+
+    box-sizing: border-box;
+
+    transition:
+      transform 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
+      opacity 400ms,
+      height 400ms;
+  }
+
+  .unit-toast-viewport.top-left .unit-toast,
+  .unit-toast-viewport.top-center .unit-toast,
+  .unit-toast-viewport.top-right .unit-toast {
+    top: 0;
+  }
+
+  .unit-toast-viewport.bottom-left .unit-toast,
+  .unit-toast-viewport.bottom-center .unit-toast,
+  .unit-toast-viewport.bottom-right .unit-toast {
+    bottom: 0;
+  }
+
+  .unit-toast[data-mounted="true"] {
+    --furo-toast-y: translateY(0);
+
+    opacity: 1;
+  }
+
+  .unit-toast[data-mounted="true"][data-front="true"] {
+    height: var(--furo-toast-initial-height);
+  }
+
+  .unit-toast[data-mounted="true"][data-expanded="false"][data-front="false"] {
+    --furo-toast-y:
+      translateY(calc(var(--furo-toast-lift) * var(--furo-toast-gap) * var(--furo-toast-toasts-before)))
+      scale(calc(1 - var(--furo-toast-toasts-before) * 0.05));
+
+    height: var(--furo-toast-front-height);
+  }
+
+  .unit-toast[data-mounted="true"][data-expanded="true"] {
+    --furo-toast-y: translateY(calc(var(--furo-toast-lift) * var(--furo-toast-offset)));
+
+    height: var(--furo-toast-initial-height);
+  }
+
+  .unit-toast-viewport .unit-toast[data-mounted="true"][data-state="closed"] {
+    --furo-toast-exit-transform: translateY(calc(var(--furo-toast-lift) * -100%));
+
+    animation: furo-toast-exit 220ms ease-in forwards;
+  }
+
+  .unit-toast-viewport .unit-toast[data-mounted="true"][data-state="closed"][data-swipe="end"] {
+    animation: furo-toast-swipe-out 200ms ease-out forwards;
+  }
+
+  .unit-toast[data-expanded="true"]::after {
+    content: "";
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 100%;
+
+    height: calc(var(--furo-toast-gap) + 0.0625rem);
+  }
+
+  .unit-toast > .inner {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-space-compact);
+
+    padding-block: 0.875rem;
+    padding-inline: 1rem;
+
+    transition: opacity 400ms;
+  }
+
+  .unit-toast[data-expanded="false"][data-front="false"] > .inner {
+    opacity: 0;
+  }
+
+  .unit-toast > .inner > .icon {
+    flex-shrink: 0;
+
+    margin-block-start: 0.0625rem;
+
+    color: var(--furo-toast-info-accent);
+    font-size: 1.125rem;
+  }
+
+  .unit-toast.success > .inner > .icon {
+    color: var(--furo-toast-success-accent);
+  }
+
+  .unit-toast.warning > .inner > .icon {
+    color: var(--furo-toast-warning-accent);
+  }
+
+  .unit-toast.error > .inner > .icon {
+    color: var(--furo-toast-error-accent);
+  }
+
+  .unit-toast.loading > .inner > .icon {
+    color: var(--color-muted-foreground);
+
+    animation: furo-toast-spin 800ms linear infinite;
+  }
+
+  .unit-toast.rich-colors.info {
+    border-color: var(--furo-toast-info-border);
+
+    background-color: var(--furo-toast-info-bg);
+    color: var(--furo-toast-info-foreground);
+  }
+
+  .unit-toast.rich-colors.success {
+    border-color: var(--furo-toast-success-border);
+
+    background-color: var(--furo-toast-success-bg);
+    color: var(--furo-toast-success-foreground);
+  }
+
+  .unit-toast.rich-colors.warning {
+    border-color: var(--furo-toast-warning-border);
+
+    background-color: var(--furo-toast-warning-bg);
+    color: var(--furo-toast-warning-foreground);
+  }
+
+  .unit-toast.rich-colors.error {
+    border-color: var(--furo-toast-error-border);
+
+    background-color: var(--furo-toast-error-bg);
+    color: var(--furo-toast-error-foreground);
+  }
+
+  .unit-toast.rich-colors.info > .inner > .icon {
+    color: var(--furo-toast-info-foreground);
+  }
+
+  .unit-toast.rich-colors.success > .inner > .icon {
+    color: var(--furo-toast-success-foreground);
+  }
+
+  .unit-toast.rich-colors.warning > .inner > .icon {
+    color: var(--furo-toast-warning-foreground);
+  }
+
+  .unit-toast.rich-colors.error > .inner > .icon {
+    color: var(--furo-toast-error-foreground);
+  }
+
+  .unit-toast.rich-colors > .inner > .content > .title {
+    color: inherit;
+  }
+
+  .unit-toast.rich-colors > .inner > .content > .description {
+    color: inherit;
+
+    opacity: 0.85;
+  }
+
+  .unit-toast.rich-colors > .inner > .actions > .action {
+    border-color: currentColor;
+
+    color: inherit;
+  }
+
+  .unit-toast.rich-colors > .built-in-close {
+    color: inherit;
+  }
+
+  .unit-toast > .inner > .content {
+    flex: 1 1 auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-3x-small);
+
+    min-width: 0;
+
+    padding-block-start: 0.0625rem;
+    padding-inline-end: 1rem;
+  }
+
+  .unit-toast > .inner > .content > .title {
+    color: var(--color-foreground);
+    font: var(--font-label-tiny);
+  }
+
+  .unit-toast > .inner > .content > .description {
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+  }
+
+  .unit-toast > .inner > .actions {
+    flex-shrink: 0;
+
+    align-self: center;
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-toast > .inner > .actions > .action {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-small);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.625rem;
+
+    background-color: transparent;
+    color: var(--color-foreground);
+    font: var(--font-label-tiny);
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color, border-color;
+  }
+
+  .unit-toast > .inner > .actions > .action:hover {
+    border-color: var(--color-foreground);
+
+    background-color: var(--color-accent);
+  }
+
+  .unit-toast > .inner > .actions > .action:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-toast > .inner > .actions > .action:disabled {
+    cursor: progress;
+    opacity: 0.7;
+  }
+
+  .unit-toast > .inner > .actions > .action > .action-spinner {
+    animation: furo-toast-spin 800ms linear infinite;
+  }
+
+  .unit-toast > .built-in-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.25rem;
+    height: 1.25rem;
+
+    border: none;
+    border-radius: var(--size-border-radius-small);
+
+    background-color: transparent;
+    color: var(--color-muted-foreground);
+    font-size: 0.875rem;
+
+    cursor: pointer;
+    opacity: 0;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color, opacity;
+  }
+
+  .unit-toast[data-front="true"]:hover > .built-in-close,
+  .unit-toast[data-expanded="true"]:hover > .built-in-close,
+  .unit-toast:focus-within > .built-in-close {
+    opacity: 1;
+  }
+
+  .unit-toast[data-expanded="false"][data-front="false"] > .built-in-close {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .unit-toast > .built-in-close:hover {
+    background-color: var(--color-accent);
+    color: var(--color-foreground);
+  }
+
+  .unit-toast > .built-in-close:focus-visible {
+    outline: none;
+    opacity: 1;
+
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-toast-viewport .unit-toast[data-mounted="true"][data-swipe="move"] {
+    transform:
+      var(--furo-toast-y)
+      translate(var(--reka-toast-swipe-move-x, 0px), var(--reka-toast-swipe-move-y, 0px));
+
+    transition: none;
+  }
+
+  .unit-toast-viewport .unit-toast[data-mounted="true"][data-swipe="cancel"] {
+    transform: var(--furo-toast-y);
+
+    transition: transform 200ms ease;
+  }
+
+  @keyframes furo-toast-exit {
+    to {
+      transform: var(--furo-toast-exit-transform, translateY(100%));
+
+      opacity: 0;
+    }
+  }
+
+  @keyframes furo-toast-swipe-out {
+    from {
+      transform:
+        var(--furo-toast-y)
+        translate(var(--reka-toast-swipe-end-x, 0px), var(--reka-toast-swipe-end-y, 0px));
+    }
+    to {
+      transform: var(--furo-toast-y) var(--furo-toast-swipe-exit, translateX(calc(100% + 1.5rem)));
+
+      opacity: 0;
+    }
+  }
+
+  @keyframes furo-toast-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-toast,
+    .unit-toast > .inner {
+      transition: none;
+    }
+
+    .unit-toast.loading > .inner > .icon,
+    .unit-toast > .inner > .actions > .action > .action-spinner,
+    .unit-toast-viewport .unit-toast[data-mounted="true"][data-state="closed"],
+    .unit-toast-viewport .unit-toast[data-mounted="true"][data-state="closed"][data-swipe="end"] {
+      animation: none;
+    }
+  }
+}
+</style>