@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroSplitter/FuroSplitter.vue

@@ -0,0 +1,237 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Splitter as RekaSplitter,
+} from 'reka-ui/namespaced'
+
+import FuroSplitterContext from './FuroSplitterContext.js'
+
+export default defineComponent({
+  name: 'FuroSplitter',
+
+  components: {
+    SplitterGroup: RekaSplitter['Group'],
+    SplitterPanel: RekaSplitter['Panel'],
+    SplitterResizeHandle: RekaSplitter['ResizeHandle'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSplitterContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroSplitterContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroSplitterContext.js').FuroSplitterSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSplitterContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <SplitterGroup
+    :ref="context.groupRootElementRef"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+    :direction="context.resolveOrientation()"
+    @layout="context.onLayoutChange({
+      rawLayout: $event,
+    })"
+  >
+    <template
+      v-for="(panel, index) of context.panels"
+      :key="context.resolvePanelKey({ panel, index })"
+    >
+      <SplitterPanel
+        class="unit-splitter-pane"
+        v-bind="context.extractPanelAttributes({ panel })"
+      >
+        <slot
+          :id="context.resolvePanelKey({ panel, index })"
+          name="panel"
+          :panel="panel"
+          :index="index"
+        />
+      </SplitterPanel>
+
+      <SplitterResizeHandle
+        v-if="!context.isLastPanel({ index })"
+        class="unit-splitter-handle"
+      >
+        <slot
+          name="handle"
+          :index="index"
+        >
+          <span class="grip" />
+        </slot>
+      </SplitterResizeHandle>
+    </template>
+  </SplitterGroup>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-splitter {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .unit-splitter.vertical {
+    flex-direction: column;
+  }
+
+  .unit-splitter-pane {
+    overflow: auto;
+
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .unit-splitter-handle {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    background-color: transparent;
+
+    outline: none;
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, box-shadow;
+  }
+
+  .unit-splitter.horizontal > .unit-splitter-handle {
+    width: 0.5rem;
+    cursor: col-resize;
+  }
+
+  .unit-splitter.vertical > .unit-splitter-handle {
+    height: 0.5rem;
+    cursor: row-resize;
+  }
+
+  /* Hairline track centered in the handle gutter. */
+  .unit-splitter-handle::before {
+    content: '';
+
+    position: absolute;
+
+    background-color: var(--color-border);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-splitter.horizontal > .unit-splitter-handle::before {
+    width: var(--size-thinnest);
+    height: 100%;
+  }
+
+  .unit-splitter.vertical > .unit-splitter-handle::before {
+    width: 100%;
+    height: var(--size-thinnest);
+  }
+
+  /* Grip pill that sits on top of the track. */
+  .unit-splitter-handle > .grip {
+    position: relative;
+
+    display: block;
+
+    border-radius: var(--size-border-radius-full);
+
+    background-color: var(--color-border);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-splitter.horizontal > .unit-splitter-handle > .grip {
+    width: 0.25rem;
+    height: 1.75rem;
+  }
+
+  .unit-splitter.vertical > .unit-splitter-handle > .grip {
+    width: 1.75rem;
+    height: 0.25rem;
+  }
+
+  .unit-splitter-handle:hover > .grip,
+  .unit-splitter-handle[data-state='hover'] > .grip,
+  .unit-splitter-handle[data-state='drag'] > .grip {
+    background-color: var(--color-ring);
+  }
+
+  .unit-splitter-handle:hover::before,
+  .unit-splitter-handle[data-state='hover']::before,
+  .unit-splitter-handle[data-state='drag']::before {
+    background-color: var(--color-ring);
+  }
+
+  /* Keyboard focus ring (arrow keys resize the focused handle). */
+  .unit-splitter-handle:focus-visible {
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-splitter-handle[data-disabled] {
+    cursor: default;
+  }
+
+  .unit-splitter-handle[data-disabled] > .grip {
+    opacity: 0.5;
+  }
+
+  /* Plain appearance: no divider line; panes read as separated cards. */
+  .unit-splitter.plain > .unit-splitter-handle::before {
+    display: none;
+  }
+
+  .unit-splitter.plain > .unit-splitter-handle > .grip {
+    opacity: 0;
+    transition-property: background-color, opacity;
+  }
+
+  .unit-splitter.plain > .unit-splitter-handle:hover > .grip,
+  .unit-splitter.plain > .unit-splitter-handle:focus-visible > .grip,
+  .unit-splitter.plain > .unit-splitter-handle[data-state='hover'] > .grip,
+  .unit-splitter.plain > .unit-splitter-handle[data-state='drag'] > .grip {
+    opacity: 1;
+  }
+}
+</style>

package/lib/components/molecules/FuroSplitter/FuroSplitterContext.js

@@ -0,0 +1,429 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import SplitterEmitPayload from './SplitterEmitPayload.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded to the underlying primitive root).
+ */
+const FURO_SPLITTER_PARCEL_KEYS = new Set([
+  'value',
+  'orientation',
+  'appearance',
+  'panels',
+])
+
+/**
+ * Panel keys forwarded to a single pane of the underlying primitive.
+ */
+const SPLITTER_PANEL_KEYS = new Set([
+  'id',
+  'defaultSize',
+  'minSize',
+  'maxSize',
+  'collapsible',
+  'collapsedSize',
+  'sizeUnit',
+])
+
+/**
+ * Context class for managing FuroSplitter component.
+ *
+ * Presentational container that renders resizable panes from a declarative
+ * `panels` array. It owns no inbound value — the layout is driven by the
+ * underlying primitive and surfaced outward via `change-value` / `update:value`.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroSplitterContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroSplitterContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroSplitterContext ? X : never} T, X
+   * @override
+   * @param {FuroSplitterContextFactoryParams} 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
+   */
+  static buildRefHash () {
+    return {
+      internalLayoutRef: ref([]),
+      groupRootElementRef: ref(null),
+    }
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   CHANGE_VALUE: 'change-value'
+   *   UPDATE_VALUE: 'update:value'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      CHANGE_VALUE: 'change-value',
+      UPDATE_VALUE: 'update:value',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'change-value': (payload: import('./SplitterEmitPayload.js').default) => void
+   *   'update:value': (layout: Array<number>) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: layout => {},
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`.
+   *
+   * @returns {typeof SplitterEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return SplitterEmitPayload
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroSplitterContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroSplitterContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal layout ref (latest pane sizes).
+   *
+   * @returns {import('vue').Ref<Array<number>>}
+   */
+  get internalLayoutRef () {
+    return this.refHash.internalLayoutRef
+  }
+
+  /**
+   * Get group root element ref.
+   *
+   * @returns {import('vue').Ref<HTMLElement | null>}
+   */
+  get groupRootElementRef () {
+    return this.refHash.groupRootElementRef
+  }
+
+  /**
+   * Parcel passed from parent via props (merged with defaults).
+   *
+   * @override
+   * @returns {FuroSplitterParcel}
+   */
+  get parcel () {
+    return {
+      orientation: 'horizontal',
+      appearance: 'default',
+      panels: [],
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Get the pane descriptors.
+   *
+   * @returns {Array<FuroSplitterPanel>}
+   */
+  get panels () {
+    return this.parcel.panels
+      ?? []
+  }
+
+  /**
+   * Resolve the layout orientation.
+   *
+   * @returns {FuroSplitterOrientation}
+   */
+  resolveOrientation () {
+    return this.parcel.orientation
+      ?? 'horizontal'
+  }
+
+  /**
+   * Resolve the visual appearance.
+   *
+   * `default` shows a divider line between panes; `plain` hides it so panes
+   * read as separated cards (the grip appears on hover / focus only).
+   *
+   * @returns {FuroSplitterAppearance}
+   */
+  resolveAppearance () {
+    return this.parcel.appearance
+      ?? 'default'
+  }
+
+  /**
+   * Resolve a stable key for a single pane.
+   *
+   * @param {{
+   *   panel: FuroSplitterPanel
+   *   index: number
+   * }} params - Parameters.
+   * @returns {string}
+   */
+  resolvePanelKey ({
+    panel,
+    index,
+  }) {
+    return panel.id
+      ?? `pane-${index}`
+  }
+
+  /**
+   * Whether the pane at the given index is the last one.
+   *
+   * @param {{
+   *   index: number
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isLastPanel ({
+    index,
+  }) {
+    return index === this.panels.length - 1
+  }
+
+  /**
+   * Extract CSS class map for the group root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    const orientation = this.resolveOrientation()
+    const appearance = this.resolveAppearance()
+
+    return Object.fromEntries([
+      ['unit-splitter', true],
+      [orientation, true],
+      [appearance, true],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to a single pane primitive.
+   *
+   * @param {{
+   *   panel: FuroSplitterPanel
+   * }} params - Parameters.
+   * @returns {Record<string, unknown>}
+   */
+  extractPanelAttributes ({
+    panel,
+  }) {
+    const entries = Object.entries(panel)
+      .filter(([key]) => SPLITTER_PANEL_KEYS.has(key))
+      .filter(([, value]) => value !== undefined)
+
+    return Object.fromEntries(entries)
+  }
+
+  /**
+   * Extract root attributes forwarded to the underlying primitive.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const parcelEntries = Object.entries(this.parcel)
+
+    return Object.fromEntries(
+      parcelEntries.filter(([key]) => !FURO_SPLITTER_PARCEL_KEYS.has(key))
+    )
+  }
+
+  /**
+   * Build a custom event for layout changes.
+   *
+   * @param {{
+   *   name: string
+   *   layout: Array<number>
+   * }} params - Parameters.
+   * @returns {import('./SplitterEmitPayload.js').SplitterRawEvent}
+   */
+  buildCustomEvent ({
+    name,
+    layout,
+  }) {
+    return new CustomEvent(
+      name,
+      {
+        detail: {
+          target: this.groupRootElementRef.value,
+          layout,
+        },
+      }
+    )
+  }
+
+  /**
+   * Handle a layout change emitted by the underlying primitive.
+   *
+   * @param {{
+   *   rawLayout: Array<number>
+   * }} params - Parameters.
+   */
+  onLayoutChange ({
+    rawLayout,
+  }) {
+    const layout = rawLayout
+      ?? []
+
+    this.internalLayoutRef.value = layout
+
+    const customEvent = this.buildCustomEvent({
+      name: this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      layout,
+    })
+
+    const payload = this.Ctor.EmitPayloadCtor.create({
+      rawEvent: customEvent,
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      payload
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      layout
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     internalLayoutRef: import('vue').Ref<Array<number>>
+ *     groupRootElementRef: import('vue').Ref<HTMLElement | null>
+ *   }
+ * }} FuroSplitterContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroSplitterContextParams, 'refHash'> & {
+ *   refHash?: {
+ *     internalLayoutRef: import('vue').Ref<Array<number>>
+ *     groupRootElementRef: import('vue').Ref<HTMLElement | null>
+ *   }
+ * }} FuroSplitterContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroSplitterContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {'horizontal' | 'vertical'} FuroSplitterOrientation
+ */
+
+/**
+ * @typedef {'default' | 'plain'} FuroSplitterAppearance
+ */
+
+/**
+ * A single resizable pane descriptor. Sizes are interpreted in `sizeUnit`
+ * (percent by default).
+ *
+ * @typedef {{
+ *   id?: string
+ *   defaultSize?: number
+ *   minSize?: number
+ *   maxSize?: number
+ *   collapsible?: boolean
+ *   collapsedSize?: number
+ *   sizeUnit?: '%' | 'px'
+ * }} FuroSplitterPanel
+ */
+
+/**
+ * @typedef {{
+ *   parcel?: FuroSplitterParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   orientation?: FuroSplitterOrientation
+ *   appearance?: FuroSplitterAppearance
+ *   panels?: Array<FuroSplitterPanel>
+ * }} FuroSplitterParcel
+ */
+
+/**
+ * @typedef {typeof FuroSplitterContext.EMIT_EVENT_HASH} FuroSplitterEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroSplitterEmitHash>} ComponentContext
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroSplitterContext
+ * }} FuroSplitterSetup
+ */

package/lib/components/molecules/FuroSplitter/SplitterEmitPayload.js

@@ -0,0 +1,69 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * SplitterEmitPayload.
+ *
+ * Wraps the layout change emitted when a pane is resized.
+ *
+ * @extends {BaseEmitPayload<SplitterRawEvent, HTMLElement>}
+ */
+export default class SplitterEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {SplitterRawEvent['detail'] | null}
+   */
+  get eventDetail () {
+    return this.rawEvent?.detail
+      ?? null
+  }
+
+  /**
+   * Get the group element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    return this.eventDetail?.target
+      ?? null
+  }
+
+  /**
+   * The pane sizes after the resize, in order.
+   *
+   * @returns {Array<number>}
+   */
+  get layout () {
+    return this.eventDetail?.layout
+      ?? []
+  }
+
+  /**
+   * Read the size of a single pane by index.
+   *
+   * @param {{
+   *   index: number
+   * }} params - Parameters.
+   * @returns {number | null}
+   */
+  extractPaneSize ({
+    index,
+  }) {
+    return this.layout[index]
+      ?? null
+  }
+}
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   layout: Array<number>
+ * }>} SplitterRawEvent
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: SplitterRawEvent
+ * }} SplitterEmitPayloadParams
+ */