@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroScrollArea/FuroScrollAreaContext.js

@@ -0,0 +1,149 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the underlying primitive
+ * root). `orientation` drives scrollbar rendering; `scrollbarVisibility` is
+ * re-mapped to the primitive's own visibility prop inside
+ * `buildOptionalRootAttributes()`.
+ */
+const FURO_SCROLL_AREA_PARCEL_KEYS = new Set([
+  'orientation',
+  'scrollbarVisibility',
+])
+
+/**
+ * Context class for FuroScrollArea molecule.
+ *
+ * Presentational scroll container that wraps overflowing content with a styled,
+ * cross-browser scrollbar. It carries no value and emits nothing — orientation
+ * and scrollbar visibility are read from `parcel`.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroScrollAreaContext extends BaseFuroContext {
+  /**
+   * get: scroll axis the container exposes.
+   *
+   * @returns {FuroScrollAreaOrientation} Orientation; defaults to vertical.
+   */
+  get orientation () {
+    return this.parcel?.orientation
+      ?? 'vertical'
+  }
+
+  /**
+   * get: when the scrollbars become visible.
+   *
+   * Value-oriented public key mapped to the primitive's visibility prop in
+   * `buildOptionalRootAttributes()`. `null` lets the primitive apply its own
+   * default (visible on hover).
+   *
+   * @returns {FuroScrollAreaScrollbarVisibility | null} Visibility, or null.
+   */
+  get scrollbarVisibility () {
+    return this.parcel?.scrollbarVisibility
+      ?? null
+  }
+
+  /**
+   * Whether the vertical scrollbar is rendered.
+   *
+   * @returns {boolean} true for `vertical` and `both` orientations.
+   */
+  showsVerticalScrollbar () {
+    return this.orientation === 'vertical'
+      || this.orientation === 'both'
+  }
+
+  /**
+   * Whether the horizontal scrollbar is rendered.
+   *
+   * @returns {boolean} true for `horizontal` and `both` orientations.
+   */
+  showsHorizontalScrollbar () {
+    return this.orientation === 'horizontal'
+      || this.orientation === 'both'
+  }
+
+  /**
+   * Whether the corner (where both scrollbars meet) is rendered.
+   *
+   * @returns {boolean} true only for the `both` orientation.
+   */
+  showsCorner () {
+    return this.orientation === 'both'
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-scroll-area', true],
+      [this.orientation, true],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to the underlying primitive root.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_SCROLL_AREA_PARCEL_KEYS.has(key))
+
+    return {
+      ...Object.fromEntries(passthroughEntries),
+      ...this.buildOptionalRootAttributes(),
+    }
+  }
+
+  /**
+   * Build optional root attributes whose values are absent unless set.
+   *
+   * @returns {Record<string, unknown>}
+   */
+  buildOptionalRootAttributes () {
+    const entries = [
+      ['type', this.scrollbarVisibility],
+    ]
+      .filter(([, value]) => value !== null)
+
+    return Object.fromEntries(entries)
+  }
+}
+
+/**
+ * @typedef {'vertical' | 'horizontal' | 'both'} FuroScrollAreaOrientation
+ */
+
+/**
+ * When the scrollbars become visible. Does not affect whether the content
+ * scrolls — configured axes are always scrollable; this only controls the
+ * bar's visibility.
+ *
+ * - `hover`: visible while the pointer is over the scroll area (primitive default).
+ * - `scroll`: visible while scrolling, then hidden after `scrollHideDelay`.
+ * - `glimpse`: briefly revealed on pointer enter, then hidden.
+ * - `auto`: visible whenever the axis overflows (native-like), hidden otherwise.
+ * - `always`: always visible.
+ *
+ * @typedef {'hover' | 'scroll' | 'glimpse' | 'auto' | 'always'} FuroScrollAreaScrollbarVisibility
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroScrollAreaParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   orientation?: FuroScrollAreaOrientation
+ *   scrollbarVisibility?: FuroScrollAreaScrollbarVisibility
+ *   scrollHideDelay?: number
+ * }} FuroScrollAreaParcel
+ */

package/lib/components/molecules/FuroSearchField/FuroSearchField.vue

@@ -0,0 +1,155 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroTextField from '../../atoms/FuroTextField/FuroTextField.vue'
+import FuroSearchFieldContext from './FuroSearchFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroSearchField',
+
+  components: {
+    FuroIcon,
+    FuroTextField,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSearchFieldContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  emits: FuroSearchFieldContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroSearchFieldContext.js').FuroSearchFieldSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSearchFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      context.extractRootClassNames(),
+      $attrs.class,
+    ]"
+    :style="$attrs.style"
+  >
+    <span
+      class="leading"
+      aria-hidden="true"
+    >
+      <slot name="icon">
+        <FuroIcon
+          :name="context.extractLeadingIconName()"
+          class="leading-icon"
+        />
+      </slot>
+    </span>
+
+    <FuroTextField
+      :parcel="context.buildControlParcel()"
+      v-bind="context.extractControlAttributes()"
+      @change-value="context.onChangeValue({
+        payload: $event,
+      })"
+      @commit-value="context.onCommitValue({
+        payload: $event,
+      })"
+    />
+
+    <slot name="trailing" />
+  </div>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-form-control.search {
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    height: var(--size-input-height);
+    width: 100%;
+    min-width: 0;
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-small);
+
+    padding-inline: 0.75rem;
+
+    background-color: var(--color-background);
+
+    transition-duration: var(--transition-timer);
+    transition-property: border-color;
+  }
+
+  .unit-form-control.search:focus-within {
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.search.invalid,
+  .unit-form-control.search.invalid:focus-within {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.search.disabled {
+    cursor: not-allowed;
+
+    opacity: 0.5;
+  }
+
+  .unit-form-control.search > .leading {
+    display: inline-flex;
+    align-items: center;
+
+    color: var(--color-foreground-tertiary);
+  }
+
+  .unit-form-control.search > .leading > .leading-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .unit-form-control.search > .text {
+    border: none;
+
+    height: 100%;
+
+    padding-block: 0;
+    padding-inline: 0;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+  }
+
+  .unit-form-control.search.disabled > .text {
+    opacity: 1;
+  }
+}
+</style>

package/lib/components/molecules/FuroSearchField/FuroSearchFieldContext.js

@@ -0,0 +1,231 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Attributes the wrapper keeps for itself instead of handing to the control.
+ */
+const FURO_SEARCH_FIELD_WRAPPER_ATTRIBUTE_KEYS = new Set([
+  'class',
+  'style',
+])
+
+/**
+ * Context class for FuroSearchField molecule.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroSearchFieldContext extends BaseFuroContext {
+  /**
+   * Icon the field leads with.
+   *
+   * @returns {string} Name of a built-in icon.
+   */
+  static get LEADING_ICON_NAME () {
+    return 'ph:magnifying-glass'
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   CHANGE_VALUE: 'change-value'
+   *   COMMIT_VALUE: 'commit-value'
+   *   UPDATE_VALUE: 'update:value'
+   * }>} Emit event names.
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      CHANGE_VALUE: 'change-value',
+      COMMIT_VALUE: 'commit-value',
+      UPDATE_VALUE: 'update:value',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'change-value': (payload: SearchFieldEmitPayload) => boolean
+   *   'commit-value': (payload: SearchFieldEmitPayload) => boolean
+   *   'update:value': (value: string | null) => boolean
+   * }} Emit event hash.
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: (/** @type {SearchFieldEmitPayload} */ payload) => true,
+      [this.EMIT_EVENT_NAME.COMMIT_VALUE]: (/** @type {SearchFieldEmitPayload} */ payload) => true,
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: (/** @type {string | null} */ value) => true,
+    }
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroSearchFieldContext} Constructor of this class.
+   */
+  get Ctor () {
+    return /** @type {typeof FuroSearchFieldContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: the text the field holds.
+   *
+   * @returns {string | number | null} Current search text.
+   */
+  get value () {
+    return this.parcel?.value
+      ?? null
+  }
+
+  /**
+   * Extract the icon the field leads with.
+   *
+   * @returns {string} Name of a built-in icon.
+   */
+  extractLeadingIconName () {
+    return this.Ctor.LEADING_ICON_NAME
+  }
+
+  /**
+   * Whether the field is marked invalid.
+   *
+   * @returns {boolean} Whether the field is invalid.
+   */
+  isInvalid () {
+    return Boolean(this.parcel?.invalid)
+  }
+
+  /**
+   * Whether the field is disabled.
+   *
+   * Disabling is a native attribute on the control, and the wrapper reads it so
+   * the border and the icon dim with it.
+   *
+   * @returns {boolean} Whether the field is disabled.
+   */
+  isDisabled () {
+    return this.hasBooleanAttribute({ name: 'disabled' })
+  }
+
+  /**
+   * Build the parcel handed to the text control.
+   *
+   * @returns {{
+   *   value: string | number | null
+   *   invalid: boolean
+   * }} Parcel of the text control.
+   */
+  buildControlParcel () {
+    return {
+      value: this.value,
+      invalid: this.isInvalid(),
+    }
+  }
+
+  /**
+   * Extract attributes handed to the text control.
+   *
+   * `class` and `style` stay on the wrapper, which is the box a consumer lays out.
+   *
+   * @returns {Record<string, *>} Attributes of the text control.
+   */
+  extractControlAttributes () {
+    const passthroughEntries = Object.entries(this.attrs)
+      .filter(([key]) => !FURO_SEARCH_FIELD_WRAPPER_ATTRIBUTE_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>} Class map of the root.
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-form-control', true],
+      ['search', true],
+      ['invalid', this.isInvalid()],
+      ['disabled', this.isDisabled()],
+    ])
+  }
+
+  /**
+   * Handle a keystroke reported by the text control.
+   *
+   * @param {{
+   *   payload: SearchFieldEmitPayload
+   * }} params - Parameters.
+   */
+  onChangeValue ({
+    payload,
+  }) {
+    this.emit(
+      this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      payload
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      payload.value
+    )
+  }
+
+  /**
+   * Handle a settled value reported by the text control.
+   *
+   * @param {{
+   *   payload: SearchFieldEmitPayload
+   * }} params - Parameters.
+   */
+  onCommitValue ({
+    payload,
+  }) {
+    this.emit(
+      this.EMIT_EVENT_NAME.COMMIT_VALUE,
+      payload
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_VALUE,
+      payload.value
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../atoms/FuroTextField/TextFieldEmitPayload.js').default} SearchFieldEmitPayload
+ */
+
+/**
+ * @typedef {keyof typeof FuroSearchFieldContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroSearchFieldParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   value?: string | number | null
+ *   invalid?: boolean
+ * }} FuroSearchFieldParcel
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<typeof FuroSearchFieldContext.EMIT_EVENT_HASH>} ComponentContext
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroSearchFieldContext
+ * }} FuroSearchFieldSetup
+ */

package/lib/components/molecules/FuroSectionHeader/FuroSectionHeader.vue

@@ -0,0 +1,140 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroSeparator from '../FuroSeparator/FuroSeparator.vue'
+import FuroSectionHeaderContext from './FuroSectionHeaderContext.js'
+
+export default defineComponent({
+  name: 'FuroSectionHeader',
+
+  components: {
+    FuroSeparator,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSectionHeaderContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroSectionHeaderContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroSectionHeaderContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSectionHeaderContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+  >
+    <div class="row">
+      <div class="lead">
+        <slot name="leading" />
+
+        <component
+          :is="context.extractHeadingTag()"
+          class="title"
+        >
+          <slot name="title">
+            {{ context.title }}
+          </slot>
+        </component>
+      </div>
+
+      <div
+        v-if="context.hasActions()"
+        class="actions"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <FuroSeparator
+      v-if="context.isDivided()"
+      :parcel="context.buildDividerParcel()"
+    />
+  </div>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-section-header {
+    border-start-start-radius: var(--size-border-radius-2x-large);
+    border-start-end-radius: var(--size-border-radius-2x-large);
+
+    background-color: var(--color-card);
+  }
+
+  .unit-section-header > .row {
+    min-block-size: 3.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-space-medium);
+
+    padding-block: 0.75rem;
+    padding-inline: 1.25rem;
+  }
+
+  .unit-section-header > .row > .lead {
+    min-inline-size: 0;
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-section-header > .row > .lead > .title {
+    margin-block: 0;
+    margin-inline: 0;
+
+    color: var(--color-foreground-title);
+  }
+
+  .unit-section-header.size-large > .row > .lead > .title {
+    font: var(--font-label-large);
+  }
+
+  .unit-section-header.size-medium > .row > .lead > .title {
+    font: var(--font-label-medium);
+  }
+
+  .unit-section-header > .row > .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-compact);
+  }
+}
+</style>