@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroToolBar/FuroToolBarContext.js

@@ -0,0 +1,75 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for FuroToolBar molecule.
+ *
+ * Presentational container that groups interactive controls (buttons, toggles,
+ * separators) into a single roving-focus region. It carries no value and emits
+ * nothing — orientation, text direction, and focus wrapping are declarative.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroToolBarContext extends BaseFuroContext {
+  /**
+   * get: layout orientation of the toolbar.
+   *
+   * @returns {'horizontal' | 'vertical'} Orientation; defaults to horizontal.
+   */
+  get orientation () {
+    return this.parcel?.orientation
+      ?? 'horizontal'
+  }
+
+  /**
+   * Extract the reading direction forwarded to the underlying primitive.
+   *
+   * Maps the value-oriented `textDirection` parcel key (`toRight` / `toLeft`)
+   * to the primitive's `dir` value. Defaults to left-to-right.
+   *
+   * @returns {'ltr' | 'rtl'} Reading direction.
+   */
+  extractTextDirectionValue () {
+    if (!this.parcel?.textDirection) {
+      return 'ltr'
+    }
+
+    return this.parcel.textDirection === 'toRight'
+      ? 'ltr'
+      : 'rtl'
+  }
+
+  /**
+   * Whether roving focus wraps from the last control back to the first.
+   *
+   * @returns {boolean} true when focus loops at the toolbar ends.
+   */
+  isLoopingFocus () {
+    return Boolean(this.parcel?.loopFocus)
+  }
+
+  /**
+   * Extract the CSS class map for the toolbar root.
+   *
+   * @returns {Record<string, boolean>} Class map keyed by class name.
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-tool-bar', true],
+      [this.orientation, true],
+    ])
+  }
+}
+
+/**
+ * @typedef {{
+ *   parcel: FuroToolBarParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   orientation?: 'horizontal' | 'vertical'
+ *   textDirection?: 'toRight' | 'toLeft'
+ *   loopFocus?: boolean
+ * }} FuroToolBarParcel
+ */

package/lib/components/molecules/FuroTooltip/FuroTooltip.vue

@@ -0,0 +1,183 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  TooltipProvider as RekaTooltipProvider,
+  TooltipRoot as RekaTooltipRoot,
+  TooltipTrigger as RekaTooltipTrigger,
+  TooltipPortal as RekaTooltipPortal,
+  TooltipContent as RekaTooltipContent,
+  TooltipArrow as RekaTooltipArrow,
+} from 'reka-ui'
+
+import FuroTooltipContext from './FuroTooltipContext.js'
+
+export default defineComponent({
+  name: 'FuroTooltip',
+
+  components: {
+    RekaTooltipProvider,
+    RekaTooltipRoot,
+    RekaTooltipTrigger,
+    RekaTooltipPortal,
+    RekaTooltipContent,
+    RekaTooltipArrow,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroTooltipContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroTooltipContext.js').FuroTooltipSlots} */ (Object),
+  emits: FuroTooltipContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroTooltipContext.js').FuroTooltipSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroTooltipContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <RekaTooltipProvider :delay-duration="context.delayDuration">
+    <RekaTooltipRoot
+      :open="context.extractOpenValue()"
+      :disabled="context.isDisabled()"
+      @update:open="context.onOpenChange({
+        isOpen: $event,
+      })"
+    >
+      <RekaTooltipTrigger
+        class="unit-tooltip-trigger"
+        v-bind="$attrs"
+      >
+        <slot name="trigger" />
+      </RekaTooltipTrigger>
+
+      <RekaTooltipPortal>
+        <RekaTooltipContent
+          class="unit-tooltip-content"
+          v-bind="context.extractContentAttributes()"
+        >
+          <slot name="content">
+            {{ context.text }}
+          </slot>
+
+          <RekaTooltipArrow
+            class="unit-tooltip-arrow"
+            :width="10"
+            :height="5"
+          />
+        </RekaTooltipContent>
+      </RekaTooltipPortal>
+    </RekaTooltipRoot>
+  </RekaTooltipProvider>
+</template>
+
+<style>
+@layer furo {
+  .unit-tooltip-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-tooltip-trigger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-tooltip-content {
+    z-index: var(--value-z-index-layer-popover);
+
+    max-width: 18rem;
+
+    border-radius: var(--size-border-radius-small);
+
+    padding-block: 0.375rem;
+    padding-inline: 0.5rem;
+
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+    box-shadow: var(--shadow-strong);
+    font: var(--font-body-small);
+
+    transform-origin: var(--reka-tooltip-content-transform-origin);
+  }
+
+  .unit-tooltip-content[data-state="delayed-open"],
+  .unit-tooltip-content[data-state="instant-open"] {
+    animation: furo-tooltip-content-in 150ms ease;
+  }
+
+  .unit-tooltip-content[data-state="closed"] {
+    animation: furo-tooltip-content-out 100ms ease;
+  }
+
+  .unit-tooltip-arrow {
+    fill: var(--color-primary);
+  }
+
+  @keyframes furo-tooltip-content-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes furo-tooltip-content-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-tooltip-content[data-state="delayed-open"],
+    .unit-tooltip-content[data-state="instant-open"],
+    .unit-tooltip-content[data-state="closed"] {
+      animation: none;
+    }
+  }
+}
+</style>

package/lib/components/molecules/FuroTooltip/FuroTooltipContext.js

@@ -0,0 +1,290 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for FuroTooltip molecule.
+ *
+ * Presentational hover/focus hint surface built on a headless tooltip
+ * primitive. Carries a short text (or rich content slot) and reacts only to
+ * open-state changes.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroTooltipContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroTooltipContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroTooltipContext ? X : never} T, X
+   * @override
+   * @param {FuroTooltipContextFactoryParams} 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 {FuroTooltipContextParams['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 FuroTooltipContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroTooltipContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal open ref.
+   *
+   * @returns {import('vue').Ref<boolean>}
+   */
+  get openRef () {
+    return this.refHash.openRef
+  }
+
+  /**
+   * get: tooltip text shown when no content slot is provided.
+   *
+   * @returns {string | null} Tooltip text, or null when supplied via slot.
+   */
+  get text () {
+    return this.parcel?.text
+      ?? null
+  }
+
+  /**
+   * get: delay before the tooltip opens, in milliseconds.
+   *
+   * @returns {number} Open delay; defaults to 200ms.
+   */
+  get delayDuration () {
+    return this.parcel?.delayDuration
+      ?? 200
+  }
+
+  /**
+   * 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 tooltip is disabled (never opens).
+   *
+   * @returns {boolean} true when disabled.
+   */
+  isDisabled () {
+    return Boolean(this.parcel?.disabled)
+  }
+
+  /**
+   * Resolve the open state forwarded to the tooltip 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: TooltipSide
+   *   align: TooltipAlign
+   *   sideOffset: number
+   * }} Positioning attributes for the content surface.
+   */
+  extractContentAttributes () {
+    const {
+      side = 'top',
+      align = 'center',
+      sideOffset = 4,
+    } = this.parcel ?? {}
+
+    return {
+      side,
+      align,
+      sideOffset,
+    }
+  }
+
+  /**
+   * Handle open-state updates from the tooltip 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>
+ *   }
+ * }} FuroTooltipContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroTooltipContextParams, 'refHash'> & {
+ *   refHash?: FuroTooltipContextParams['refHash']
+ * }} FuroTooltipContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroTooltipContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {'top' | 'right' | 'bottom' | 'left'} TooltipSide
+ */
+
+/**
+ * @typedef {'start' | 'center' | 'end'} TooltipAlign
+ */
+
+/**
+ * @typedef {import('vue').HTMLAttributes & {
+ *   parcel?: TooltipParcel | null
+ * }} Props
+ */
+
+/**
+ * Closed-set Furo behavior for `<FuroTooltip>`.
+ * JSON-serializable only. Not an open passthrough to the internal primitive.
+ *
+ * @typedef {{
+ *   text?: string
+ *   side?: TooltipSide
+ *   align?: TooltipAlign
+ *   sideOffset?: number
+ *   delayDuration?: number
+ *   disabled?: boolean
+ *   open?: boolean | null
+ * }} TooltipParcel
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroTooltipEmitHash, FuroTooltipSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {typeof FuroTooltipContext.EMIT_EVENT_HASH} FuroTooltipEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   trigger: {}
+ *   content: {}
+ * }>} FuroTooltipSlots
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroTooltipContext
+ * }} FuroTooltipSetup
+ */