@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroDrawer/FuroDrawer.vue

@@ -0,0 +1,618 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Drawer as RekaDrawer,
+} from 'reka-ui/namespaced'
+
+import FuroDrawerContext from './FuroDrawerContext.js'
+
+export default defineComponent({
+  name: 'FuroDrawer',
+
+  components: {
+    DrawerRoot: RekaDrawer['Root'],
+    DrawerTrigger: RekaDrawer['Trigger'],
+    DrawerSwipeArea: RekaDrawer['SwipeArea'],
+    DrawerPortal: RekaDrawer['Portal'],
+    DrawerOverlay: RekaDrawer['Overlay'],
+    DrawerContent: RekaDrawer['Content'],
+    DrawerHandle: RekaDrawer['Handle'],
+    DrawerTitle: RekaDrawer['Title'],
+    DrawerDescription: RekaDrawer['Description'],
+    DrawerClose: RekaDrawer['Close'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroDrawerContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroDrawerContext.js').FuroDrawerSlots} */ (Object),
+  emits: FuroDrawerContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroDrawerContext.js').FuroDrawerSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroDrawerContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      $attrs.class,
+      context.extractRootClassNames(),
+    ]"
+    :style="$attrs.style"
+  >
+    <DrawerRoot
+      :open="context.extractOpenValue()"
+      :modal="context.extractModal()"
+      :swipe-direction="context.extractSwipeDirection()"
+      :snap-points="context.extractSnapPoints()"
+      :snap-point="context.extractActiveSnapPointValue()"
+      :snap-to-sequential-points="context.isSequentialSnap()"
+      @update:open="context.onOpenChange({
+        isOpen: $event,
+      })"
+      @update:snap-point="context.onSnapPointChange({
+        snapPoint: $event,
+      })"
+    >
+      <DrawerTrigger
+        v-if="Object.hasOwn($slots, 'trigger')"
+        as-child
+        :disabled="context.isDisabled()"
+      >
+        <slot name="trigger" />
+      </DrawerTrigger>
+
+      <DrawerSwipeArea
+        v-if="context.shouldEnableSwipeToOpen()"
+        :class="['unit-drawer-swipe-area', context.extractSide()]"
+      />
+
+      <DrawerPortal>
+        <DrawerOverlay class="unit-drawer-overlay" />
+
+        <DrawerContent
+          :class="context.extractContentClassNames()"
+          @interact-outside="context.onInteractOutside({
+            rawEvent: $event,
+          })"
+          @escape-key-down="context.onEscapeKeyDown({
+            rawEvent: $event,
+          })"
+          @open-auto-focus="context.onOpenAutoFocus({
+            rawEvent: $event,
+          })"
+        >
+          <DrawerHandle
+            v-if="context.shouldShowDragHandle()"
+            class="handle"
+          />
+
+          <header class="header">
+            <DrawerTitle class="title">
+              <slot name="title">
+                {{ context.extractTitle() }}
+              </slot>
+            </DrawerTitle>
+
+            <DrawerDescription
+              v-if="context.hasDescription()"
+              class="description"
+            >
+              <slot name="description">
+                {{ context.extractDescription() }}
+              </slot>
+            </DrawerDescription>
+          </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>
+
+          <DrawerClose
+            class="built-in-close"
+            :aria-label="context.extractCloseText()"
+            :disabled="context.isBusy()"
+          >
+            <slot name="close">
+              ✕
+            </slot>
+          </DrawerClose>
+        </DrawerContent>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-drawer.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--value-z-index-layer-overlay);
+
+    background-color: var(--furo-dialog-overlay-background);
+
+    will-change: opacity;
+  }
+
+  .unit-drawer-overlay[data-state="open"] {
+    animation: furo-drawer-overlay-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-overlay[data-state="closed"] {
+    animation: furo-drawer-overlay-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Invisible grab strip pinned to the docked edge — enables swipe-to-open while closed. */
+  .unit-drawer-swipe-area {
+    position: fixed;
+    z-index: var(--value-z-index-layer-overlay);
+  }
+
+  .unit-drawer-swipe-area.left,
+  .unit-drawer-swipe-area.right {
+    top: 0;
+
+    width: 1.25rem;
+    height: 100dvh;
+  }
+
+  .unit-drawer-swipe-area.left {
+    left: 0;
+  }
+
+  .unit-drawer-swipe-area.right {
+    right: 0;
+  }
+
+  .unit-drawer-swipe-area.top,
+  .unit-drawer-swipe-area.bottom {
+    left: 0;
+
+    width: 100vw;
+    height: 1.25rem;
+  }
+
+  .unit-drawer-swipe-area.top {
+    top: 0;
+  }
+
+  .unit-drawer-swipe-area.bottom {
+    bottom: 0;
+  }
+
+  .unit-drawer-content {
+    --furo-drawer-size: 24rem;
+    --furo-drawer-radius: var(--size-border-radius-large);
+
+    /* Resting position composes the active snap-point offset (docking axis,
+       routed below) with the live swipe-drag offset the primitive writes. */
+    --furo-drawer-offset-x: 0px;
+    --furo-drawer-offset-y: 0px;
+
+    position: fixed;
+    z-index: calc(var(--value-z-index-layer-overlay) + 1);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+
+    border: var(--size-thinnest) solid var(--color-border);
+
+    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(
+      calc(var(--furo-drawer-offset-x) + var(--drawer-swipe-movement-x, 0px)),
+      calc(var(--furo-drawer-offset-y) + var(--drawer-swipe-movement-y, 0px))
+    );
+
+    transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Suppress the settle transition while actively dragging so the panel tracks the pointer. */
+  .unit-drawer-content[data-swiping] {
+    transition-duration: 0ms;
+
+    user-select: none;
+    will-change: transform, translate;
+  }
+
+  .unit-drawer-content.sm {
+    --furo-drawer-size: 18rem;
+  }
+
+  .unit-drawer-content.lg {
+    --furo-drawer-size: 32rem;
+  }
+
+  /* Horizontal drawers (left / right) — full height, sized width; snap offset on the X axis. */
+  .unit-drawer-content.left,
+  .unit-drawer-content.right {
+    --furo-drawer-offset-x: var(--drawer-snap-point-offset, 0px);
+
+    top: 0;
+
+    width: min(calc(100vw - 2rem), var(--furo-drawer-size));
+    height: 100dvh;
+  }
+
+  .unit-drawer-content.left {
+    left: 0;
+
+    border-start-end-radius: var(--furo-drawer-radius);
+    border-end-end-radius: var(--furo-drawer-radius);
+  }
+
+  .unit-drawer-content.right {
+    right: 0;
+
+    border-start-start-radius: var(--furo-drawer-radius);
+    border-end-start-radius: var(--furo-drawer-radius);
+  }
+
+  /* Vertical drawers (top / bottom) — full width, sized height; snap offset on the Y axis. */
+  .unit-drawer-content.top,
+  .unit-drawer-content.bottom {
+    --furo-drawer-offset-y: var(--drawer-snap-point-offset, 0px);
+
+    left: 0;
+
+    width: 100vw;
+    height: min(calc(100dvh - 2rem), var(--furo-drawer-size));
+  }
+
+  .unit-drawer-content.top {
+    top: 0;
+
+    border-end-start-radius: var(--furo-drawer-radius);
+    border-end-end-radius: var(--furo-drawer-radius);
+  }
+
+  .unit-drawer-content.bottom {
+    bottom: 0;
+
+    border-start-start-radius: var(--furo-drawer-radius);
+    border-start-end-radius: var(--furo-drawer-radius);
+  }
+
+  /* Fullscreen fills the full extent along the docking axis — no exposed edge to round. */
+  .unit-drawer-content.fullscreen {
+    --furo-drawer-radius: 0;
+  }
+
+  .unit-drawer-content.fullscreen.left,
+  .unit-drawer-content.fullscreen.right {
+    width: 100vw;
+  }
+
+  .unit-drawer-content.fullscreen.top,
+  .unit-drawer-content.fullscreen.bottom {
+    height: 100dvh;
+  }
+
+  .unit-drawer-content.busy {
+    cursor: progress;
+  }
+
+  .unit-drawer-content.left[data-state="open"] {
+    animation: furo-drawer-in-left 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.left[data-state="closed"] {
+    animation: furo-drawer-out-left 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.right[data-state="open"] {
+    animation: furo-drawer-in-right 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.right[data-state="closed"] {
+    animation: furo-drawer-out-right 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.top[data-state="open"] {
+    animation: furo-drawer-in-top 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.top[data-state="closed"] {
+    animation: furo-drawer-out-top 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.bottom[data-state="open"] {
+    animation: furo-drawer-in-bottom 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content.bottom[data-state="closed"] {
+    animation: furo-drawer-out-bottom 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .unit-drawer-content:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  /* Grab handle — a short bar centered on the docked edge. */
+  .unit-drawer-content > .handle {
+    position: absolute;
+
+    border-radius: 624.9375rem;
+
+    background-color: var(--color-muted-foreground);
+
+    opacity: 0.4;
+
+    cursor: grab;
+  }
+
+  .unit-drawer-content.left > .handle,
+  .unit-drawer-content.right > .handle {
+    top: 50%;
+
+    width: 0.375rem;
+    height: 2.5rem;
+
+    translate: 0 -50%;
+  }
+
+  .unit-drawer-content.left > .handle {
+    right: 0.5rem;
+  }
+
+  .unit-drawer-content.right > .handle {
+    left: 0.5rem;
+  }
+
+  .unit-drawer-content.top > .handle,
+  .unit-drawer-content.bottom > .handle {
+    left: 50%;
+
+    width: 2.5rem;
+    height: 0.375rem;
+
+    translate: -50% 0;
+  }
+
+  .unit-drawer-content.top > .handle {
+    bottom: 0.5rem;
+  }
+
+  .unit-drawer-content.bottom > .handle {
+    top: 0.5rem;
+  }
+
+  .unit-drawer-content > .header {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-drawer-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-drawer-content > .header > .description {
+    color: var(--color-muted-foreground);
+    font-size: var(--font-size-small);
+    line-height: var(--font-line-height-body, 1.4);
+  }
+
+  .unit-drawer-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-drawer-content > .footer {
+    flex-shrink: 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--size-space-small);
+  }
+
+  .unit-drawer-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-drawer-content > .built-in-close:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-drawer-content > .built-in-close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-drawer-content > .built-in-close:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  @keyframes furo-drawer-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes furo-drawer-overlay-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes furo-drawer-in-left {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes furo-drawer-out-left {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: -100% 0;
+    }
+  }
+
+  @keyframes furo-drawer-in-right {
+    from {
+      translate: 100% 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes furo-drawer-out-right {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: 100% 0;
+    }
+  }
+
+  @keyframes furo-drawer-in-top {
+    from {
+      translate: 0 -100%;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes furo-drawer-out-top {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: 0 -100%;
+    }
+  }
+
+  @keyframes furo-drawer-in-bottom {
+    from {
+      translate: 0 100%;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes furo-drawer-out-bottom {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: 0 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-drawer-overlay[data-state="open"],
+    .unit-drawer-overlay[data-state="closed"],
+    .unit-drawer-content[data-state="open"],
+    .unit-drawer-content[data-state="closed"] {
+      animation: none;
+    }
+
+    .unit-drawer-content {
+      transition: none;
+    }
+  }
+}
+</style>