@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroBreadcrumb/FuroBreadcrumbContext.js

@@ -0,0 +1,257 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the root element).
+ */
+const FURO_BREADCRUMB_PARCEL_KEYS = new Set([
+  'items',
+  'maxVisibleItems',
+])
+
+/**
+ * Context class for FuroBreadcrumb molecule.
+ *
+ * The last entry is the current one. Positional rather than a flag, which would
+ * let a caller mark two entries current, or none.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroBreadcrumbContext extends BaseFuroContext {
+  /**
+   * How many entries are shown before the trail collapses.
+   *
+   * The design draws up to four levels, then one collapsed form.
+   *
+   * @returns {number}
+   */
+  static get DEFAULT_MAX_VISIBLE_ITEMS () {
+    return 4
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroBreadcrumbContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroBreadcrumbContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: entries in the trail, root first.
+   *
+   * @returns {Array<FuroBreadcrumbItem>}
+   */
+  get items () {
+    return this.parcel?.items
+      ?? []
+  }
+
+  /**
+   * get: how many entries are shown before the trail collapses.
+   *
+   * Clamped to two: a fold hiding both the root and the current entry says nothing.
+   *
+   * @returns {number}
+   */
+  get maxVisibleItems () {
+    const requested = this.parcel?.maxVisibleItems
+      ?? this.Ctor.DEFAULT_MAX_VISIBLE_ITEMS
+
+    return Math.max(requested, 2)
+  }
+
+  /**
+   * Whether the trail is deeper than it may show.
+   *
+   * @returns {boolean}
+   */
+  hasOverflow () {
+    return this.items.length > this.maxVisibleItems
+  }
+
+  /**
+   * Extract the entries shown before the overflow marker.
+   *
+   * The root alone, so a reader keeps where the tree begins.
+   *
+   * @returns {Array<FuroBreadcrumbItem>}
+   */
+  extractLeadingItems () {
+    if (!this.hasOverflow()) {
+      return []
+    }
+
+    return this.items.slice(0, 1)
+  }
+
+  /**
+   * Extract the entries the overflow marker stands for.
+   *
+   * Handed to the overflow slot so a consumer need not recompute them.
+   *
+   * @returns {Array<FuroBreadcrumbItem>}
+   */
+  extractOverflowItems () {
+    if (!this.hasOverflow()) {
+      return []
+    }
+
+    return this.items.slice(1, this.extractTrailingStartIndex())
+  }
+
+  /**
+   * Extract the entries shown after the overflow marker.
+   *
+   * @returns {Array<FuroBreadcrumbItem>}
+   */
+  extractTrailingItems () {
+    return this.items.slice(this.extractTrailingStartIndex())
+  }
+
+  /**
+   * Index the trailing run starts at.
+   *
+   * @returns {number}
+   */
+  extractTrailingStartIndex () {
+    if (!this.hasOverflow()) {
+      return 0
+    }
+
+    return this.items.length
+      - (this.maxVisibleItems - 1)
+  }
+
+  /**
+   * Whether an entry is the one the user is on.
+   *
+   * @param {{
+   *   crumb: FuroBreadcrumbItem
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isCurrent ({
+    crumb,
+  }) {
+    return crumb === this.items.at(-1)
+  }
+
+  /**
+   * Whether an entry can be followed.
+   *
+   * The current entry renders as text even when it carries a destination.
+   *
+   * @param {{
+   *   crumb: FuroBreadcrumbItem
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isNavigable ({
+    crumb,
+  }) {
+    return !this.isCurrent({ crumb })
+      && !crumb.disabled
+  }
+
+  /**
+   * Extract the element an entry renders as.
+   *
+   * @param {{
+   *   crumb: FuroBreadcrumbItem
+   * }} params - Parameters.
+   * @returns {'a' | 'span'}
+   */
+  extractItemTag ({
+    crumb,
+  }) {
+    if (this.isNavigable({ crumb }) && crumb.href) {
+      return 'a'
+    }
+
+    return 'span'
+  }
+
+  /**
+   * Extract the attributes an entry carries.
+   *
+   * `aria-current` is what a screen reader announces; the weight change is not.
+   *
+   * @param {{
+   *   crumb: FuroBreadcrumbItem
+   * }} params - Parameters.
+   * @returns {Record<string, unknown>}
+   */
+  extractItemAttributes ({
+    crumb,
+  }) {
+    const entries = [
+      ['href', this.extractItemTag({ crumb }) === 'a'
+        ? crumb.href
+        : null],
+      ['aria-current', this.isCurrent({ crumb })
+        ? 'page'
+        : null],
+      ['aria-disabled', crumb.disabled
+        ? 'true'
+        : null],
+    ]
+      .filter(([, value]) => value !== null)
+
+    return Object.fromEntries(entries)
+  }
+
+  /**
+   * Extract CSS class map for one entry.
+   *
+   * @param {{
+   *   crumb: FuroBreadcrumbItem
+   * }} params - Parameters.
+   * @returns {Record<string, boolean>}
+   */
+  extractItemClassNames ({
+    crumb,
+  }) {
+    return Object.fromEntries([
+      ['crumb', true],
+      ['current', this.isCurrent({ crumb })],
+      ['disabled', Boolean(crumb.disabled)],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to the root element.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_BREADCRUMB_PARCEL_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+}
+
+/**
+ * @typedef {{
+ *   label: string
+ *   href?: string
+ *   disabled?: boolean
+ * }} FuroBreadcrumbItem
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroBreadcrumbParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   items?: Array<FuroBreadcrumbItem>
+ *   maxVisibleItems?: number
+ * }} FuroBreadcrumbParcel
+ */

package/lib/components/molecules/FuroCollapsible/CollapsibleEmitPayload.js

@@ -0,0 +1,69 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * CollapsibleEmitPayload.
+ *
+ * @extends {BaseEmitPayload<CollapsibleRawEvent, HTMLElement>}
+ */
+export default class CollapsibleEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {CollapsibleRawEvent['detail'] | null}
+   */
+  get eventDetail () {
+    return this.rawEvent?.detail
+      ?? null
+  }
+
+  /**
+   * Get the control element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    return this.eventDetail?.target
+      ?? null
+  }
+
+  /**
+   * Open state after the change.
+   *
+   * @returns {FuroCollapsibleValue}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? false
+  }
+
+  /**
+   * Whether the region is open after the change.
+   *
+   * @returns {boolean}
+   */
+  isOpen () {
+    return this.value === true
+  }
+}
+
+/**
+ * @typedef {import('./FuroCollapsibleContext.js').FuroCollapsibleValue} FuroCollapsibleValue
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: CollapsibleRawEvent
+ * }} CollapsibleEmitPayloadParams
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   value: FuroCollapsibleValue
+ * }>} CollapsibleRawEvent
+ */
+
+/**
+ * @typedef {CollapsibleEmitPayloadParams} CollapsibleEmitPayloadFactoryParams
+ */

package/lib/components/molecules/FuroCollapsible/FuroCollapsible.vue

@@ -0,0 +1,177 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Collapsible as RekaCollapsible,
+} from 'reka-ui/namespaced'
+
+import FuroCollapsibleContext from './FuroCollapsibleContext.js'
+
+export default defineComponent({
+  name: 'FuroCollapsible',
+
+  components: {
+    CollapsibleRoot: RekaCollapsible['Root'],
+    CollapsibleTrigger: RekaCollapsible['Trigger'],
+    CollapsibleContent: RekaCollapsible['Content'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroCollapsibleContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroCollapsibleContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroCollapsibleContext.js').FuroCollapsibleSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroCollapsibleContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <CollapsibleRoot
+    :ref="context.collapsibleRootElementRef"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+    :disabled="context.isDisabled()"
+    :open="context.internalValueRef.value"
+    @update:open="context.onChangeValue({
+      rawValue: $event,
+    })"
+  >
+    <CollapsibleTrigger class="trigger">
+      <slot
+        name="trigger"
+        :open="context.isOpen()"
+      />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent class="content">
+      <div class="body">
+        <slot :open="context.isOpen()" />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-collapsible {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 0;
+  }
+
+  .unit-collapsible.disabled {
+    opacity: 0.5;
+  }
+
+  .unit-collapsible > .trigger {
+    appearance: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-space-small);
+
+    width: 100%;
+
+    border: none;
+
+    padding-block: 0.5rem;
+    padding-inline: 0;
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: var(--font-label-medium);
+    text-align: start;
+
+    cursor: pointer;
+  }
+
+  .unit-collapsible > .trigger:focus-visible {
+    outline: none;
+    border-radius: var(--size-border-radius-medium);
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-collapsible.disabled > .trigger {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /*
+    Reka exposes the measured content height as `--reka-collapsible-content-height`;
+    animate the wrapper height between states for a smooth expand/collapse.
+  */
+  .unit-collapsible > .content {
+    overflow: hidden;
+  }
+
+  .unit-collapsible > .content[data-state='open'] {
+    animation: furo-collapsible-down 200ms ease-out;
+  }
+
+  .unit-collapsible > .content[data-state='closed'] {
+    animation: furo-collapsible-up 200ms ease-out;
+  }
+
+  .unit-collapsible > .content > .body {
+    padding-block: var(--size-space-small);
+
+    color: var(--color-muted-foreground);
+  }
+
+  @keyframes furo-collapsible-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--reka-collapsible-content-height);
+    }
+  }
+
+  @keyframes furo-collapsible-up {
+    from {
+      height: var(--reka-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}
+</style>