@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroPopover/FuroPopover.vue

@@ -0,0 +1,171 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  PopoverRoot as RekaPopoverRoot,
+  PopoverTrigger as RekaPopoverTrigger,
+  PopoverPortal as RekaPopoverPortal,
+  PopoverContent as RekaPopoverContent,
+} from 'reka-ui'
+
+import FuroPopoverContext from './FuroPopoverContext.js'
+
+export default defineComponent({
+  name: 'FuroPopover',
+
+  components: {
+    RekaPopoverRoot,
+    RekaPopoverTrigger,
+    RekaPopoverPortal,
+    RekaPopoverContent,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroPopoverContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroPopoverContext.js').FuroPopoverSlots} */ (Object),
+  emits: FuroPopoverContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroPopoverContext.js').FuroPopoverSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroPopoverContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <RekaPopoverRoot
+    :open="context.extractOpenValue()"
+    :modal="context.isModal()"
+    @update:open="context.onOpenChange({
+      isOpen: $event,
+    })"
+  >
+    <RekaPopoverTrigger
+      class="unit-popover-trigger"
+      :disabled="context.isDisabled()"
+      v-bind="$attrs"
+    >
+      <slot name="trigger" />
+    </RekaPopoverTrigger>
+
+    <RekaPopoverPortal>
+      <RekaPopoverContent
+        class="unit-popover-content"
+        v-bind="context.extractContentAttributes()"
+      >
+        <slot name="content" />
+      </RekaPopoverContent>
+    </RekaPopoverPortal>
+  </RekaPopoverRoot>
+</template>
+
+<style>
+@layer furo {
+  .unit-popover-trigger {
+    display: inline-flex;
+    align-items: center;
+
+    border: none;
+
+    padding-block: 0;
+    padding-inline: 0;
+
+    background-color: transparent;
+
+    color: inherit;
+    font: var(--font-label-small);
+
+    cursor: inherit;
+  }
+
+  .unit-popover-trigger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-popover-content {
+    z-index: var(--value-z-index-layer-popover);
+
+    min-width: 12rem;
+    max-width: 22rem;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.75rem;
+    padding-inline: 0.75rem;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    font: var(--font-body-small);
+
+    box-shadow: var(--shadow-strong);
+
+    transform-origin: var(--reka-popover-content-transform-origin);
+  }
+
+  .unit-popover-content:focus-visible {
+    outline: none;
+  }
+
+  .unit-popover-content[data-state="open"] {
+    animation: furo-popover-content-in 150ms ease;
+  }
+
+  .unit-popover-content[data-state="closed"] {
+    animation: furo-popover-content-out 100ms ease;
+  }
+
+  @keyframes furo-popover-content-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes furo-popover-content-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-popover-content[data-state="open"],
+    .unit-popover-content[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+</style>

package/lib/components/molecules/FuroPopover/FuroPopoverContext.js

@@ -0,0 +1,279 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for FuroPopover molecule.
+ *
+ * Presentational click-triggered overlay built on a headless popover
+ * primitive. Anchors a portaled surface to a trigger, holds arbitrary
+ * interactive content (inline cell / field edit), and reacts only to
+ * open-state changes.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroPopoverContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroPopoverContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroPopoverContext ? X : never} T, X
+   * @override
+   * @param {FuroPopoverContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroPopoverContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      openRef: ref(false),
+    }
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   OPEN_CHANGE: 'open:change'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      OPEN_CHANGE: 'open:change',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'open:change': (payload: { open: boolean }) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.OPEN_CHANGE]: payload => {},
+    }
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroPopoverContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroPopoverContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal open ref.
+   *
+   * @returns {import('vue').Ref<boolean>}
+   */
+  get openRef () {
+    return this.refHash.openRef
+  }
+
+  /**
+   * Whether the open state is controlled via parcel.
+   *
+   * @returns {boolean} true when `parcel.open` is supplied.
+   */
+  isOpenControlled () {
+    return this.parcel?.open !== undefined
+      && this.parcel?.open !== null
+  }
+
+  /**
+   * Whether the popover is disabled (trigger never opens it).
+   *
+   * @returns {boolean} true when disabled.
+   */
+  isDisabled () {
+    return Boolean(this.parcel?.disabled)
+  }
+
+  /**
+   * Whether the popover behaves modally (focus trapped, outside blocked).
+   *
+   * @returns {boolean} true when modal.
+   */
+  isModal () {
+    return Boolean(this.parcel?.modal)
+  }
+
+  /**
+   * Resolve the open state forwarded to the popover root.
+   *
+   * @returns {boolean} Resolved open state.
+   */
+  extractOpenValue () {
+    if (this.isOpenControlled()) {
+      return Boolean(this.parcel?.open)
+    }
+
+    return this.openRef.value
+  }
+
+  /**
+   * Extract content positioning attributes.
+   *
+   * @returns {{
+   *   side: PopoverSide
+   *   align: PopoverAlign
+   *   sideOffset: number
+   * }} Positioning attributes for the content surface.
+   */
+  extractContentAttributes () {
+    const {
+      side = 'bottom',
+      align = 'center',
+      sideOffset = 4,
+    } = this.parcel ?? {}
+
+    return {
+      side,
+      align,
+      sideOffset,
+    }
+  }
+
+  /**
+   * Handle open-state updates from the popover root.
+   *
+   * @param {{
+   *   isOpen: boolean
+   * }} params - Parameters of this method.
+   */
+  onOpenChange ({
+    isOpen,
+  }) {
+    if (!this.isOpenControlled()) {
+      this.openRef.value = isOpen
+    }
+
+    this.emit(
+      this.EMIT_EVENT_NAME.OPEN_CHANGE,
+      {
+        open: isOpen,
+      }
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     openRef: import('vue').Ref<boolean>
+ *   }
+ * }} FuroPopoverContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroPopoverContextParams, 'refHash'> & {
+ *   refHash?: FuroPopoverContextParams['refHash']
+ * }} FuroPopoverContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroPopoverContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {'top' | 'right' | 'bottom' | 'left'} PopoverSide
+ */
+
+/**
+ * @typedef {'start' | 'center' | 'end'} PopoverAlign
+ */
+
+/**
+ * @typedef {import('vue').HTMLAttributes & {
+ *   parcel?: PopoverParcel | null
+ * }} Props
+ */
+
+/**
+ * Closed-set Furo behavior for `<FuroPopover>`.
+ * JSON-serializable only. Not an open passthrough to the internal primitive.
+ *
+ * @typedef {{
+ *   side?: PopoverSide
+ *   align?: PopoverAlign
+ *   sideOffset?: number
+ *   disabled?: boolean
+ *   modal?: boolean
+ *   open?: boolean | null
+ * }} PopoverParcel
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroPopoverEmitHash, FuroPopoverSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {typeof FuroPopoverContext.EMIT_EVENT_HASH} FuroPopoverEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   trigger: {}
+ *   content: {}
+ * }>} FuroPopoverSlots
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroPopoverContext
+ * }} FuroPopoverSetup
+ */

package/lib/components/molecules/FuroScrollArea/FuroScrollArea.vue

@@ -0,0 +1,181 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  ScrollArea as RekaScrollArea,
+} from 'reka-ui/namespaced'
+
+import FuroScrollAreaContext from './FuroScrollAreaContext.js'
+
+export default defineComponent({
+  name: 'FuroScrollArea',
+
+  components: {
+    ScrollAreaRoot: RekaScrollArea['Root'],
+    ScrollAreaViewport: RekaScrollArea['Viewport'],
+    ScrollAreaScrollbar: RekaScrollArea['Scrollbar'],
+    ScrollAreaThumb: RekaScrollArea['Thumb'],
+    ScrollAreaCorner: RekaScrollArea['Corner'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroScrollAreaContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroScrollAreaContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroScrollAreaContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroScrollAreaContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <ScrollAreaRoot
+    :class="context.extractRootClassNames()"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+  >
+    <ScrollAreaViewport class="viewport">
+      <slot />
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      v-if="context.showsVerticalScrollbar()"
+      class="scrollbar"
+      orientation="vertical"
+    >
+      <ScrollAreaThumb class="thumb" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaScrollbar
+      v-if="context.showsHorizontalScrollbar()"
+      class="scrollbar"
+      orientation="horizontal"
+    >
+      <ScrollAreaThumb class="thumb" />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaCorner
+      v-if="context.showsCorner()"
+      class="corner"
+    />
+  </ScrollAreaRoot>
+</template>
+
+<!--
+  Unscoped: the underlying Viewport is a multi-root (Fragment) component, so a
+  scoped `data-v-*` attribute is not applied to its element and `> .viewport`
+  would not match — collapsing the viewport height and breaking vertical scroll.
+  All selectors are namespaced under `.unit-scroll-area`.
+-->
+<style>
+@layer furo {
+  .unit-scroll-area {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    overflow: hidden;
+  }
+
+  .unit-scroll-area > .viewport {
+    width: 100%;
+    height: 100%;
+
+    border-radius: inherit;
+  }
+
+  .unit-scroll-area > .scrollbar {
+    display: flex;
+    flex: none;
+
+    padding: 0.125rem;
+
+    background-color: transparent;
+
+    user-select: none;
+    touch-action: none;
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-scroll-area > .scrollbar[data-orientation='vertical'] {
+    width: 0.625rem;
+  }
+
+  .unit-scroll-area > .scrollbar[data-orientation='horizontal'] {
+    flex-direction: column;
+
+    height: 0.625rem;
+  }
+
+  .unit-scroll-area > .scrollbar > .thumb {
+    position: relative;
+
+    flex: 1;
+
+    border-radius: var(--size-border-radius-full);
+
+    background-color: var(--color-border);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  /* Expand the pointer hit-target to ~44px without enlarging the visual thumb. */
+  .unit-scroll-area > .scrollbar > .thumb::before {
+    content: '';
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width: 100%;
+    height: 100%;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+
+    transform: translate(-50%, -50%);
+  }
+
+  .unit-scroll-area > .scrollbar:hover > .thumb,
+  .unit-scroll-area > .scrollbar > .thumb:hover {
+    background-color: var(--color-ring);
+  }
+
+  .unit-scroll-area > .corner {
+    background-color: transparent;
+  }
+}
+</style>