@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroSelect/SelectEmitPayload.js

@@ -0,0 +1,181 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * SelectEmitPayload.
+ *
+ * @extends {BaseEmitPayload<SelectRawEvent, HTMLElement>}
+ */
+export default class SelectEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {SelectRawEvent['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
+  }
+
+  /**
+   * Selected value of the select.
+   *
+   * @returns {FuroSelectValue}
+   */
+  get value () {
+    return this.eventDetail?.selectedOption
+      ?.value
+      ?? null
+  }
+
+  /**
+   * Selected values of the select.
+   *
+   * @returns {Array<FuroSelectValue> | null}
+   */
+  get values () {
+    return this.eventDetail?.selectedOptions
+      ?.map(it => it?.value)
+      ?? null
+  }
+
+  /**
+   * Matched option for the selected value.
+   *
+   * @returns {import('./FuroSelectContext.js').FuroSelectOption | null}
+   */
+  get selectedOption () {
+    return this.eventDetail?.selectedOption
+      ?? null
+  }
+
+  /**
+   * Zero-based selected option index.
+   *
+   * @returns {number | null}
+   */
+  get selectedIndex () {
+    return this.eventDetail?.selectedIndex
+      ?? null
+  }
+
+  /**
+   * Selected options for multi-select mode.
+   *
+   * @returns {Array<FuroSelectOption> | null}
+   */
+  get selectedOptions () {
+    return this.eventDetail?.selectedOptions
+      ?? null
+  }
+
+  /**
+   * Zero-based selected option indices for multi-select mode.
+   *
+   * @returns {Array<number> | null}
+   */
+  get selectedIndices () {
+    return this.eventDetail?.selectedIndices
+      ?? null
+  }
+
+  /**
+   * Whether the select value is empty.
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    return this.value === null
+  }
+
+  /**
+   * Whether the select has a selected value.
+   *
+   * @returns {boolean}
+   */
+  hasSelectedValue () {
+    return !this.hasEmptyValue()
+  }
+
+  /**
+   * Whether the selected value matches the given option value.
+   *
+   * @param {{
+   *   value: FuroSelectValue
+   * }} params - Parameters of this method.
+   * @returns {boolean}
+   */
+  matchesOption ({
+    value,
+  }) {
+    return this.value === value
+  }
+}
+
+/**
+ * A value FuroSelect can bind — shared with FuroSelectContext so the value
+ * contract stays defined in one place, independent of the headless library.
+ *
+ * @typedef {import('./FuroSelectContext.js').FuroSelectValue} FuroSelectValue
+ */
+
+/**
+ * @typedef {FuroSelectOptionPropsBase & {
+ *     label: string | null
+ *     value: FuroSelectValue
+ *     disabled?: boolean
+ *     separator?: boolean
+ *     options?: Array<FuroSelectOption> | null
+ *     [key: string]: *
+ *   }
+ * } FuroSelectOption
+ */
+
+/*
+ * --- Internal headless-library type adapter ---
+ * The ONLY place in this file that references the underlying headless library
+ * (`Reka`). `FuroSelectOption` above builds on the Furo-named alias, so swapping
+ * the library later means editing only this block.
+ */
+
+/**
+ * @typedef {Reka.SelectItemProps
+ *   & Reka.SelectItemTextProps
+ *   & Reka.SelectItemIndicatorProps} FuroSelectOptionPropsBase
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   selectedOption: FuroSelectOption | null
+ *   selectedOptions: Array<FuroSelectOption>
+ *   selectedIndex: number
+ *   selectedGroupIndex: number | null
+ *   selectedIndices: Array<number>
+ *   selectedGroupIndices: Array<number>
+ * }>} SelectRawEvent
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: SelectRawEvent
+ * }} SelectEmitPayloadParams
+ */
+
+/**
+ * @typedef {SelectEmitPayloadParams} SelectEmitPayloadFactoryParams
+ */
+
+/**
+ * @import * as Reka from 'reka-ui'
+ */

package/lib/components/molecules/FuroSeparator/FuroSeparator.vue

@@ -0,0 +1,88 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Separator as RekaSeparator,
+} from 'reka-ui'
+
+import FuroSeparatorContext from './FuroSeparatorContext.js'
+
+export default defineComponent({
+  name: 'FuroSeparator',
+
+  components: {
+    RekaSeparator,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSeparatorContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroSeparatorContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroSeparatorContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSeparatorContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <RekaSeparator
+    class="unit-separator"
+    :class="context.orientation"
+    :orientation="context.orientation"
+    :decorative="context.isDecorative()"
+    v-bind="$attrs"
+  />
+</template>
+
+<style>
+@layer furo {
+  .unit-separator {
+    flex-shrink: 0;
+
+    border: none;
+
+    background-color: var(--color-border);
+  }
+
+  .unit-separator.horizontal {
+    width: 100%;
+    height: var(--size-thinnest);
+  }
+
+  .unit-separator.vertical {
+    align-self: stretch;
+
+    width: var(--size-thinnest);
+    height: auto;
+  }
+}
+</style>

package/lib/components/molecules/FuroSeparator/FuroSeparatorContext.js

@@ -0,0 +1,40 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for FuroSeparator molecule.
+ *
+ * Presentational divider between sibling content (toolbar groups, section
+ * boundaries). Emits nothing — it carries no value and reacts to no events.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroSeparatorContext extends BaseFuroContext {
+  /**
+   * get: layout orientation of the divider.
+   *
+   * @returns {'horizontal' | 'vertical'} Orientation; defaults to horizontal.
+   */
+  get orientation () {
+    return this.parcel?.orientation
+      ?? 'horizontal'
+  }
+
+  /**
+   * Whether the divider is purely visual (no semantic meaning for assistive
+   * tech). When true the underlying primitive drops its `separator` role.
+   *
+   * @returns {boolean} true when the divider is decorative.
+   */
+  isDecorative () {
+    return Boolean(this.parcel?.decorative)
+  }
+}
+
+/**
+ * @typedef {{
+ *   parcel: {
+ *     orientation?: 'horizontal' | 'vertical'
+ *     decorative?: boolean
+ *   } | null
+ * }} Props
+ */

package/lib/components/molecules/FuroSkeleton/FuroSkeleton.vue

@@ -0,0 +1,101 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroSkeletonContext from './FuroSkeletonContext.js'
+
+export default defineComponent({
+  name: 'FuroSkeleton',
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSkeletonContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroSkeletonContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroSkeletonContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSkeletonContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="unit-skeleton"
+    :class="[
+      context.variant,
+      {
+        animated: context.isAnimated(),
+      },
+    ]"
+    :style="context.inlineStyle"
+    aria-hidden="true"
+    v-bind="$attrs"
+  />
+</template>
+
+<style>
+@layer furo {
+  .unit-skeleton {
+    display: block;
+
+    width: var(--furo-skeleton-width, 100%);
+    height: var(--furo-skeleton-height, 1rem);
+    border-radius: 0.25rem;
+
+    background-color: var(--color-muted);
+  }
+
+  .unit-skeleton.circle {
+    width: var(--furo-skeleton-width, 2.5rem);
+    height: var(--furo-skeleton-height, 2.5rem);
+    border-radius: 50%;
+  }
+
+  .unit-skeleton.animated {
+    animation: furo-skeleton-pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes furo-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-skeleton.animated {
+      animation: none;
+    }
+  }
+}
+</style>

package/lib/components/molecules/FuroSkeleton/FuroSkeletonContext.js

@@ -0,0 +1,82 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for FuroSkeleton molecule.
+ *
+ * Presentational loading placeholder shown while real content is fetching.
+ * Carries no value and emits nothing — shape comes from the variant, size from
+ * optional width / height, and a pulse animation signals the loading state.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroSkeletonContext extends BaseFuroContext {
+  /**
+   * get: placeholder shape variant.
+   *
+   * @returns {'text' | 'circle' | 'rectangle'} Variant; defaults to text.
+   */
+  get variant () {
+    return this.parcel?.variant
+      ?? 'text'
+  }
+
+  /**
+   * get: explicit width override (any CSS length).
+   *
+   * @returns {string | null} Width, or null to use the variant default.
+   */
+  get width () {
+    return this.parcel?.width
+      ?? null
+  }
+
+  /**
+   * get: explicit height override (any CSS length).
+   *
+   * @returns {string | null} Height, or null to use the variant default.
+   */
+  get height () {
+    return this.parcel?.height
+      ?? null
+  }
+
+  /**
+   * get: inline custom properties feeding the size overrides.
+   *
+   * Null entries are dropped by Vue, so the CSS fallback keeps the variant
+   * default when no override is supplied.
+   *
+   * @returns {{
+   *   '--furo-skeleton-width': string | null
+   *   '--furo-skeleton-height': string | null
+   * }} Style hash.
+   */
+  get inlineStyle () {
+    return {
+      '--furo-skeleton-width': this.width,
+      '--furo-skeleton-height': this.height,
+    }
+  }
+
+  /**
+   * Whether the pulse animation runs. Reduced-motion users still get a static
+   * placeholder via the CSS media query.
+   *
+   * @returns {boolean} true when animated; defaults to true.
+   */
+  isAnimated () {
+    return this.parcel?.animated
+      ?? true
+  }
+}
+
+/**
+ * @typedef {{
+ *   parcel: {
+ *     variant?: 'text' | 'circle' | 'rectangle'
+ *     width?: string
+ *     height?: string
+ *     animated?: boolean
+ *   } | null
+ * }} Props
+ */