@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroupContext.js

@@ -0,0 +1,551 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import ToggleGroupEmitPayload from './ToggleGroupEmitPayload.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded to the underlying primitive root).
+ */
+const FURO_TOGGLE_GROUP_PARCEL_KEYS = new Set([
+  'value',
+  'selectionMode',
+  'options',
+  'variant',
+  'size',
+  'disabled',
+  'orientation',
+])
+
+/**
+ * Context class for managing FuroToggleGroup component.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroToggleGroupContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroToggleGroupContextParams} params
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroToggleGroupContext ? X : never} T, X
+   * @override
+   * @param {FuroToggleGroupContextFactoryParams} 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 {
+      internalValueRef: ref(null),
+      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('./ToggleGroupEmitPayload.js').default) => void
+   *   'update:value': (value: FuroToggleGroupValue) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.CHANGE_VALUE]: payload => {},
+      [this.EMIT_EVENT_NAME.UPDATE_VALUE]: value => {},
+    }
+  }
+
+  /**
+   * get: Constructor of `EmitPayload`.
+   *
+   * @returns {typeof ToggleGroupEmitPayload}
+   */
+  static get EmitPayloadCtor () {
+    return ToggleGroupEmitPayload
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroToggleGroupContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroToggleGroupContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal value ref (synced selection model).
+   *
+   * @returns {import('vue').Ref<FuroToggleGroupValue>}
+   */
+  get internalValueRef () {
+    return this.refHash.internalValueRef
+  }
+
+  /**
+   * 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 {FuroToggleGroupParcel}
+   */
+  get parcel () {
+    return {
+      selectionMode: 'single',
+      options: [],
+      variant: 'default',
+      size: 'default',
+      disabled: false,
+      orientation: 'horizontal',
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Get the toggle options.
+   *
+   * @returns {Array<FuroToggleGroupOption>}
+   */
+  get options () {
+    return this.parcel.options
+      ?? []
+  }
+
+  /**
+   * Resolve the selection mode (maps to the primitive's selection type).
+   *
+   * @returns {FuroToggleGroupSelectionMode}
+   */
+  resolveSelectionMode () {
+    return this.parcel.selectionMode
+      ?? 'single'
+  }
+
+  /**
+   * Resolve the layout orientation.
+   *
+   * @returns {FuroToggleGroupOrientation}
+   */
+  resolveOrientation () {
+    return this.parcel.orientation
+      ?? 'horizontal'
+  }
+
+  /**
+   * Whether multiple values can be selected.
+   *
+   * @returns {boolean}
+   */
+  isMultiple () {
+    return this.resolveSelectionMode() === 'multiple'
+  }
+
+  /**
+   * Resolve the default empty selection for the current selection mode.
+   *
+   * @returns {FuroToggleGroupValue}
+   */
+  resolveDefaultValue () {
+    if (this.isMultiple()) {
+      return []
+    }
+
+    return null
+  }
+
+  /**
+   * Whether the parent controls `parcel.value`.
+   *
+   * @returns {boolean}
+   */
+  isControlled () {
+    const { parcel } = this.props
+
+    return parcel !== null
+      && Object.hasOwn(parcel, 'value')
+  }
+
+  /**
+   * Resolve synced selection value from parcel or fallthrough attrs.
+   *
+   * @returns {FuroToggleGroupValue}
+   */
+  resolveSyncedValue () {
+    const { parcel: parcelSource } = this.props
+
+    const hasParcelValue = parcelSource !== null
+      && Object.hasOwn(parcelSource, 'value')
+
+    if (hasParcelValue) {
+      return parcelSource.value
+        ?? this.resolveDefaultValue()
+    }
+
+    const { value: attrsValue } = this.attrs ?? {}
+
+    if (attrsValue !== undefined) {
+      return /** @type {FuroToggleGroupValue} */ (attrsValue)
+    }
+
+    return this.resolveDefaultValue()
+  }
+
+  /**
+   * Whether the group is disabled.
+   *
+   * @returns {boolean}
+   */
+  isDisabled () {
+    return Boolean(this.parcel.disabled)
+      || this.hasBooleanAttribute({ name: 'disabled' })
+  }
+
+  /**
+   * Whether a single option is disabled.
+   *
+   * @param {{
+   *   option: FuroToggleGroupOption
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isOptionDisabled ({
+    option,
+  }) {
+    return this.isDisabled()
+      || Boolean(option.disabled)
+  }
+
+  /**
+   * Whether the given option value is currently selected.
+   *
+   * @param {{
+   *   value: string
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isSelected ({
+    value,
+  }) {
+    const selectedValue = this.internalValueRef.value
+
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.includes(value)
+    }
+
+    return selectedValue === value
+  }
+
+  /**
+   * Extract the display label for an option.
+   *
+   * @param {{
+   *   option: FuroToggleGroupOption
+   * }} params - Parameters.
+   * @returns {string}
+   */
+  extractOptionLabel ({
+    option,
+  }) {
+    return option.label
+      ?? option.value
+  }
+
+  /**
+   * Extract CSS class map for the group root.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    const orientation = this.resolveOrientation()
+
+    return Object.fromEntries([
+      ['unit-toggle-group', true],
+      [orientation, true],
+      ['disabled', this.isDisabled()],
+    ])
+  }
+
+  /**
+   * Extract CSS class map for a single toggle item.
+   *
+   * @param {{
+   *   option: FuroToggleGroupOption
+   * }} params - Parameters.
+   * @returns {Record<string, boolean>}
+   */
+  extractItemClassNames ({
+    option,
+  }) {
+    const variant = this.parcel.variant
+      ?? 'default'
+
+    const size = this.parcel.size
+      ?? 'default'
+
+    const sizeClassEntries = size === 'default'
+      ? []
+      : [[`size-${size}`, true]]
+
+    return Object.fromEntries([
+      ['unit-toggle-group-item', true],
+      [variant, true],
+      ...sizeClassEntries,
+      ['disabled', this.isOptionDisabled({ option })],
+    ])
+  }
+
+  /**
+   * 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_TOGGLE_GROUP_PARCEL_KEYS.has(key))
+    )
+  }
+
+  /**
+   * Build a custom event for selection changes.
+   *
+   * @param {{
+   *   name: string
+   *   value: FuroToggleGroupValue
+   * }} params - Parameters.
+   * @returns {import('./ToggleGroupEmitPayload.js').ToggleGroupRawEvent}
+   */
+  buildCustomEvent ({
+    name,
+    value,
+  }) {
+    return new CustomEvent(
+      name,
+      {
+        detail: {
+          target: this.groupRootElementRef.value,
+          value,
+        },
+      }
+    )
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroToggleGroupContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    this.watch(
+      () => this.resolveSyncedValue(),
+      syncedValue => {
+        if (!this.isControlled()) {
+          return
+        }
+
+        this.internalValueRef.value = syncedValue
+      },
+      {
+        immediate: true,
+      }
+    )
+
+    return this
+  }
+
+  /**
+   * Handle selection update emitted by the underlying primitive.
+   *
+   * @param {{
+   *   rawValue: FuroToggleGroupValue
+   * }} params - Parameters.
+   */
+  onChangeValue ({
+    rawValue,
+  }) {
+    const value = rawValue
+      ?? this.resolveDefaultValue()
+
+    this.internalValueRef.value = value
+
+    const customEvent = this.buildCustomEvent({
+      name: this.EMIT_EVENT_NAME.CHANGE_VALUE,
+      value,
+    })
+
+    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,
+      value
+    )
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     internalValueRef: import('vue').Ref<FuroToggleGroupValue>
+ *     groupRootElementRef: import('vue').Ref<HTMLElement | null>
+ *   }
+ * }} FuroToggleGroupContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroToggleGroupContextParams, 'refHash'> & {
+ *   refHash?: {
+ *     internalValueRef: import('vue').Ref<FuroToggleGroupValue>
+ *     groupRootElementRef: import('vue').Ref<HTMLElement | null>
+ *   }
+ * }} FuroToggleGroupContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroToggleGroupContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * Public selection model (`v-model:value`, `parcel.value`).
+ * A single value in `single` mode, an array in `multiple` mode.
+ *
+ * @typedef {string | Array<string> | null} FuroToggleGroupValue
+ */
+
+/**
+ * @typedef {'single' | 'multiple'} FuroToggleGroupSelectionMode
+ */
+
+/**
+ * @typedef {'horizontal' | 'vertical'} FuroToggleGroupOrientation
+ */
+
+/**
+ * @typedef {'default' | 'outline'} FuroToggleGroupVariant
+ */
+
+/**
+ * @typedef {'default' | 'sm' | 'lg'} FuroToggleGroupSize
+ */
+
+/**
+ * @typedef {{
+ *   value: string
+ *   label?: string
+ *   disabled?: boolean
+ * }} FuroToggleGroupOption
+ */
+
+/**
+ * @typedef {{
+ *   parcel?: FuroToggleGroupParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   value?: FuroToggleGroupValue
+ *   selectionMode?: FuroToggleGroupSelectionMode
+ *   options?: Array<FuroToggleGroupOption>
+ *   variant?: FuroToggleGroupVariant
+ *   size?: FuroToggleGroupSize
+ *   disabled?: boolean
+ *   orientation?: FuroToggleGroupOrientation
+ * }} FuroToggleGroupParcel
+ */
+
+/**
+ * @typedef {typeof FuroToggleGroupContext.EMIT_EVENT_HASH} FuroToggleGroupEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroToggleGroupEmitHash>} ComponentContext
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroToggleGroupContext
+ * }} FuroToggleGroupSetup
+ */

package/lib/components/molecules/FuroToggleGroup/ToggleGroupEmitPayload.js

@@ -0,0 +1,80 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * ToggleGroupEmitPayload.
+ *
+ * @extends {BaseEmitPayload<ToggleGroupRawEvent, HTMLElement>}
+ */
+export default class ToggleGroupEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {ToggleGroupRawEvent['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(s) after the change.
+   *
+   * @returns {FuroToggleGroupValue | null}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? null
+  }
+
+  /**
+   * Whether the given option value is selected after the change.
+   *
+   * @param {{
+   *   value: string
+   * }} params - Parameters.
+   * @returns {boolean}
+   */
+  isSelected ({
+    value,
+  }) {
+    const selectedValue = this.value
+
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.includes(value)
+    }
+
+    return selectedValue === value
+  }
+}
+
+/**
+ * @typedef {import('./FuroToggleGroupContext.js').FuroToggleGroupValue} FuroToggleGroupValue
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: ToggleGroupRawEvent
+ * }} ToggleGroupEmitPayloadParams
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target: HTMLElement | null
+ *   value: FuroToggleGroupValue | null
+ * }>} ToggleGroupRawEvent
+ */
+
+/**
+ * @typedef {ToggleGroupEmitPayloadParams} ToggleGroupEmitPayloadFactoryParams
+ */

package/lib/components/molecules/FuroToolBar/FuroToolBar.vue

@@ -0,0 +1,91 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  ToolbarRoot as RekaToolbarRoot,
+} from 'reka-ui'
+
+import FuroToolBarContext from './FuroToolBarContext.js'
+
+export default defineComponent({
+  name: 'FuroToolBar',
+
+  components: {
+    RekaToolbarRoot,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroToolBarContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  /**
+   * Setup of this component.
+   *
+   * @param {import('./FuroToolBarContext.js').Props} props - Props.
+   * @param {import('vue').SetupContext} componentContext - Setup context.
+   * @returns {{ context: FuroToolBarContext }} Render context.
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroToolBarContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <RekaToolbarRoot
+    :class="context.extractRootClassNames()"
+    :orientation="context.orientation"
+    :dir="context.extractTextDirectionValue()"
+    :loop="context.isLoopingFocus()"
+    v-bind="$attrs"
+  >
+    <slot />
+  </RekaToolbarRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-tool-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    min-width: 0;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.25rem;
+
+    background-color: var(--color-background);
+  }
+
+  .unit-tool-bar.vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>