@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroSectionHeader/FuroSectionHeaderContext.js

@@ -0,0 +1,204 @@
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Furo-owned parcel keys (not forwarded verbatim to the root element).
+ */
+const FURO_SECTION_HEADER_PARCEL_KEYS = new Set([
+  'title',
+  'headingLevel',
+  'size',
+  'divided',
+])
+
+/**
+ * Context class for FuroSectionHeader molecule.
+ *
+ * @extends {BaseFuroContext<null, Props, null>}
+ */
+export default class FuroSectionHeaderContext extends BaseFuroContext {
+  /**
+   * Sizes the header can take.
+   *
+   * @returns {Array<FuroSectionHeaderSize>} Sizes, largest first.
+   */
+  static get SIZES () {
+    return [
+      'large',
+      'medium',
+    ]
+  }
+
+  /**
+   * Default size.
+   *
+   * @returns {FuroSectionHeaderSize} Size used when the parcel names none.
+   */
+  static get DEFAULT_SIZE () {
+    return 'large'
+  }
+
+  /**
+   * Default heading level.
+   *
+   * @returns {number} Heading level used when the parcel names none.
+   */
+  static get DEFAULT_HEADING_LEVEL () {
+    return 2
+  }
+
+  /**
+   * Shallowest heading level HTML defines.
+   *
+   * @returns {number} Shallowest level.
+   */
+  static get SHALLOWEST_HEADING_LEVEL () {
+    return 1
+  }
+
+  /**
+   * Deepest heading level HTML defines.
+   *
+   * @returns {number} Deepest level.
+   */
+  static get DEEPEST_HEADING_LEVEL () {
+    return 6
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroSectionHeaderContext} Constructor.
+   */
+  get Ctor () {
+    return /** @type {typeof FuroSectionHeaderContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: text the heading renders.
+   *
+   * @returns {string} Title; empty string when unset.
+   */
+  get title () {
+    return this.parcel?.title
+      ?? ''
+  }
+
+  /**
+   * get: type step the title renders at.
+   *
+   * @returns {FuroSectionHeaderSize} Size.
+   */
+  get size () {
+    return this.parcel?.size
+      ?? this.Ctor.DEFAULT_SIZE
+  }
+
+  /**
+   * get: depth of the heading in the consumer's document outline.
+   *
+   * Clamped to the levels HTML defines, because `h0` and `h7` are not elements.
+   *
+   * @returns {number} Heading level.
+   */
+  get headingLevel () {
+    const requested = this.parcel?.headingLevel
+      ?? this.Ctor.DEFAULT_HEADING_LEVEL
+
+    return Math.min(
+      Math.max(requested, this.Ctor.SHALLOWEST_HEADING_LEVEL),
+      this.Ctor.DEEPEST_HEADING_LEVEL
+    )
+  }
+
+  /**
+   * Whether a rule closes the header off from what follows it.
+   *
+   * @returns {boolean} true when the rule renders.
+   */
+  isDivided () {
+    return this.parcel?.divided
+      ?? true
+  }
+
+  /**
+   * Whether the consumer filled the trailing region.
+   *
+   * @returns {boolean} true when the actions slot carries content.
+   */
+  hasActions () {
+    return Boolean(this.componentContext.slots?.actions)
+  }
+
+  /**
+   * Extract the element the heading renders as.
+   *
+   * @returns {string} Heading tag name.
+   */
+  extractHeadingTag () {
+    return `h${this.headingLevel}`
+  }
+
+  /**
+   * Build the parcel handed to the rule.
+   *
+   * The rule is decorative: the heading already tells a screen reader where the
+   * boundary is, so announcing it twice adds nothing.
+   *
+   * @returns {{
+   *   orientation: 'horizontal'
+   *   decorative: boolean
+   * }} Separator parcel.
+   */
+  buildDividerParcel () {
+    return {
+      orientation: 'horizontal',
+      decorative: true,
+    }
+  }
+
+  /**
+   * Extract CSS class map for the root.
+   *
+   * @returns {Record<string, boolean>} Class map.
+   */
+  extractRootClassNames () {
+    return Object.fromEntries([
+      ['unit-section-header', true],
+      [`size-${this.size}`, true],
+    ])
+  }
+
+  /**
+   * Extract attributes forwarded to the root element.
+   *
+   * @returns {Record<string, *>} Passthrough attributes.
+   */
+  extractRootAttributes () {
+    const passthroughEntries = Object.entries(this.parcel ?? {})
+      .filter(([key]) => !FURO_SECTION_HEADER_PARCEL_KEYS.has(key))
+
+    return Object.fromEntries(passthroughEntries)
+  }
+}
+
+/**
+ * @typedef {'large' | 'medium'} FuroSectionHeaderSize
+ */
+
+/**
+ * @typedef {{
+ *   parcel: FuroSectionHeaderParcel | null
+ * }} Props
+ */
+
+/**
+ * @typedef {{
+ *   title?: string
+ *   headingLevel?: number
+ *   size?: FuroSectionHeaderSize
+ *   divided?: boolean
+ * }} FuroSectionHeaderParcel
+ */

package/lib/components/molecules/FuroSelect/FuroSelect.vue

@@ -0,0 +1,474 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Select as RekaSelect,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroSelectContext from './FuroSelectContext.js'
+
+export default defineComponent({
+  name: 'FuroSelect',
+
+  components: {
+    FuroIcon,
+    SelectRoot: RekaSelect['Root'],
+    SelectTrigger: RekaSelect['Trigger'],
+    SelectValue: RekaSelect['Value'],
+    SelectIcon: RekaSelect['Icon'],
+    SelectContent: RekaSelect['Content'],
+    SelectViewport: RekaSelect['Viewport'],
+    SelectScrollUpButton: RekaSelect['ScrollUpButton'],
+    SelectScrollDownButton: RekaSelect['ScrollDownButton'],
+    SelectGroup: RekaSelect['Group'],
+    SelectLabel: RekaSelect['Label'],
+    SelectOption: RekaSelect['Item'],
+    SelectOptionText: RekaSelect['ItemText'],
+    SelectOptionIndicator: RekaSelect['ItemIndicator'],
+    SelectSeparator: RekaSelect['Separator'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {PropType<FuroSelectContext['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    triggerParcel: {
+      /** @type {PropType<FuroSelectContext['triggerParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    portalParcel: {
+      /** @type {PropType<FuroSelectContext['portalParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    contentParcel: {
+      /** @type {PropType<FuroSelectContext['contentParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {FuroSelectSlots} */ (Object),
+  emits: FuroSelectContext.EMIT_EVENT_HASH,
+
+  /** @type {FuroSelectSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSelectContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { PropType } from 'vue'
+ * @import { FuroSelectSlots } from './FuroSelectContext.js'
+ * @import { FuroSelectSetup } from './FuroSelectContext.js'
+ */
+</script>
+
+<template>
+  <div
+    class="unit-form-control select"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <SelectRoot
+      v-bind="context.extractRootAttributes()"
+      :model-value="context.internalValueRef.value"
+      @update:model-value="context.onChangeValue({
+        selectedValue: $event,
+      })"
+    >
+      <SelectTrigger
+        :ref="context.triggerElementRef"
+        class="trigger"
+        :class="{
+          loading: context.loading,
+          invalid: context.isInvalid,
+        }"
+        :aria-invalid="context.isInvalid"
+        v-bind="context.extractTriggerAttributes()"
+      >
+        <slot name="trigger-content">
+          <SelectValue
+            class="value"
+            :placeholder="context.extractPlaceholder()"
+          >
+            <slot name="trigger-text" />
+          </SelectValue>
+
+          <SelectIcon class="trigger-icon-wrapper">
+            <slot
+              v-if="context.loading"
+              name="trigger-loading-icon"
+            >
+              <FuroIcon
+                name="ph:circle-notch"
+                class="trigger-icon"
+              />
+            </slot>
+
+            <slot
+              v-else
+              name="trigger-icon"
+            >
+              <FuroIcon
+                name="ph:caret-down"
+                class="trigger-icon"
+              />
+            </slot>
+          </SelectIcon>
+        </slot>
+      </SelectTrigger>
+
+      <SelectContent
+        class="unit-select-content"
+        :side-offset="4"
+        v-bind="context.extractContentAttributes()"
+      >
+        <slot name="content-before" />
+
+        <SelectScrollUpButton class="scroll-up-button">
+          <slot name="scroll-up-button">
+            <FuroIcon name="ph:caret-up" />
+          </slot>
+        </SelectScrollUpButton>
+
+        <SelectViewport class="viewport">
+          <template
+            v-for="(option, index) in context.parcel?.options"
+            :key="index"
+          >
+            <template v-if="context.shouldShowGroupOption({ option })">
+              <SelectGroup
+                class="group"
+                :disabled="option.disabled"
+              >
+                <slot
+                  name="group"
+                  :group="option"
+                  :group-index="index"
+                >
+                  <SelectLabel class="label">
+                    <slot
+                      name="group-label"
+                      :group="option"
+                      :group-index="index"
+                    >
+                      {{ context.resolveOptionLabel({ option }) }}
+                    </slot>
+                  </SelectLabel>
+
+                  <template
+                    v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
+                    :key="groupChildIndex"
+                  >
+                    <SelectOption
+                      class="option"
+                      :value="context.resolveOptionValue({ option: groupChildOption })"
+                      :disabled="groupChildOption.disabled || option.disabled"
+                    >
+                      <slot
+                        name="option"
+                        :group="option"
+                        :group-index="index"
+                        :option="groupChildOption"
+                        :option-index="groupChildIndex"
+                      >
+                        <SelectOptionText>
+                          <slot
+                            name="option-text"
+                            :option="groupChildOption"
+                            :option-index="groupChildIndex"
+                          >
+                            {{ context.resolveOptionLabel({ option: groupChildOption }) }}
+                          </slot>
+                        </SelectOptionText>
+
+                        <SelectOptionIndicator class="select-indicator">
+                          <slot
+                            name="option-indicator"
+                            :option="groupChildOption"
+                            :option-index="groupChildIndex"
+                          >
+                            <FuroIcon name="ph:check" />
+                          </slot>
+                        </SelectOptionIndicator>
+                      </slot>
+                    </SelectOption>
+
+                    <slot
+                      v-if="groupChildOption.separator"
+                      name="separator"
+                      :option="groupChildOption"
+                      :option-index="groupChildIndex"
+                    >
+                      <SelectSeparator class="separator" />
+                    </slot>
+                  </template>
+                </slot>
+              </SelectGroup>
+            </template>
+
+            <template v-else>
+              <SelectOption
+                :value="context.resolveOptionValue({ option })"
+                class="option"
+                :disabled="option.disabled"
+              >
+                <slot
+                  name="option"
+                  :option="option"
+                  :option-index="index"
+                >
+                  <SelectOptionText>
+                    <slot
+                      name="option-text"
+                      :option="option"
+                      :option-index="index"
+                    >
+                      {{ context.resolveOptionLabel({ option }) }}
+                    </slot>
+                  </SelectOptionText>
+
+                  <SelectOptionIndicator class="select-indicator">
+                    <slot
+                      name="option-indicator"
+                      :option="option"
+                      :option-index="index"
+                    >
+                      <FuroIcon
+                        name="ph:check"
+                      />
+                    </slot>
+                  </SelectOptionIndicator>
+                </slot>
+              </SelectOption>
+            </template>
+
+            <slot
+              v-if="option.separator"
+              name="separator"
+              :option="option"
+              :option-index="index"
+            >
+              <SelectSeparator class="separator" />
+            </slot>
+          </template>
+
+          <SelectOption
+            v-if="context.hasEmptyOptions()"
+            :value="null"
+            class="option"
+            @select.stop.prevent
+          >
+            <SelectOptionText class="empty-text">
+              <slot name="empty">
+                No options
+              </slot>
+            </SelectOptionText>
+          </SelectOption>
+        </SelectViewport>
+
+        <SelectScrollDownButton class="scroll-down-button">
+          <slot name="scroll-down-button">
+            <FuroIcon name="ph:caret-down" />
+          </slot>
+        </SelectScrollDownButton>
+
+        <slot name="content-after" />
+      </SelectContent>
+    </SelectRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-form-control.select > .trigger {
+    position: relative;
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-space-2x-small);
+
+    width: 100%;
+    min-width: fit-content;
+    height: var(--size-input-height);
+
+    padding-block: 0.5rem;
+    padding-inline: 0.625rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+
+    cursor: pointer;
+    white-space: nowrap;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color;
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-form-control.select > .trigger:focus-visible {
+    outline: none;
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.select > .trigger[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.select > .trigger.loading {
+    pointer-events: none;
+    cursor: wait;
+
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.select > .trigger.invalid {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.select > .trigger.invalid:focus-visible {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.select > .trigger [data-placeholder] {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-select-content {
+    z-index: var(--value-z-index-layer-popover);
+
+    min-width: var(--reka-select-trigger-width, 8rem);
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-border);
+
+    padding: 0.25rem;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+  }
+
+  .unit-select-content > .scroll-up-button,
+  .unit-select-content > .scroll-down-button {
+    padding: 0.25rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-select-content > .viewport > .group > .label {
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    color: var(--color-muted-foreground);
+    font: var(--font-label-tiny);
+    font-weight: var(--font-weight-semibold, 600);
+    user-select: none;
+  }
+
+  .unit-select-content > .viewport > .group > .option,
+  .unit-select-content > .viewport > .option {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-space-2x-small);
+
+    border-radius: var(--size-border-radius-small);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.375rem;
+
+    min-height: calc(var(--size-input-height) - 0.5rem);
+
+    font: var(--font-body-medium);
+    user-select: none;
+    cursor: default;
+
+    outline: none;
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-select-content > .viewport > .option > .empty-text {
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+    user-select: none;
+  }
+
+  .unit-select-content > .viewport > .group > .option[data-disabled],
+  .unit-select-content > .viewport > .group[disabled="true"] > .option,
+  .unit-select-content > .viewport > .option[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .unit-select-content > .viewport > .group > .option[data-highlighted]:not([data-disabled]),
+  .unit-select-content > .viewport > .option[data-highlighted]:not([data-disabled]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-select-content > .viewport > .separator:not(:first-child):not(:last-child),
+  .unit-select-content > .viewport > .group > .separator:not(:first-child):not(:last-child) {
+    height: var(--size-thinnest);
+    background-color: var(--color-border);
+    margin-block: 0.25rem;
+    margin-inline: calc(0.25rem * -1);
+  }
+
+  .unit-select-content > .viewport > .group > .separator:not(:first-child):not(:last-child) {
+    margin-inline-start: 0.75rem;
+  }
+}
+</style>