@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroTable/FuroTableRowItemContext.js

@@ -0,0 +1,111 @@
+/**
+ * Per-row presentation context for FuroTable.
+ *
+ * Encapsulates the state and value resolution for a single table row, so the
+ * template iterates over instances and calls parameterless (or column-keyed)
+ * methods instead of threading row params through the page context.
+ */
+export default class FuroTableRowItemContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroTableRowItemContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    row,
+    rowKeyField,
+    selectedRowKeys,
+  }) {
+    this.row = row
+    this.rowKeyField = rowKeyField
+    this.selectedRowKeys = selectedRowKeys
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroTableRowItemContext ? X : never} T, X
+   * @param {FuroTableRowItemContextParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    row,
+    rowKeyField,
+    selectedRowKeys,
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        row,
+        rowKeyField,
+        selectedRowKeys,
+      })
+    )
+  }
+
+  /**
+   * Extract the unique key of this row.
+   *
+   * @returns {string | number | null} Row key, or `null` when absent.
+   */
+  extractKey () {
+    return /** @type {string | number | null} */ (
+      this.row?.[this.rowKeyField]
+      ?? null
+    )
+  }
+
+  /**
+   * Extract the display value for a given column.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {unknown} Cell value, or `null` when absent.
+   */
+  extractCellValue ({
+    column,
+  }) {
+    return this.row?.[column.field]
+      ?? null
+  }
+
+  /**
+   * Whether this row is currently selected.
+   *
+   * @returns {boolean}
+   */
+  isSelected () {
+    const rowKey = this.extractKey()
+
+    if (rowKey === null) {
+      return false
+    }
+
+    return this.selectedRowKeys.includes(rowKey)
+  }
+
+  /**
+   * Extract the class names for this row.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRowClassNames () {
+    return {
+      'data-row': true,
+      selected: this.isSelected(),
+    }
+  }
+}
+
+/**
+ * @typedef {{
+ *   row: Record<string, unknown>
+ *   rowKeyField: string
+ *   selectedRowKeys: Array<string | number>
+ * }} FuroTableRowItemContextParams
+ */
+
+/**
+ * @typedef {import('./FuroTableContext.js').FuroTableColumn} FuroTableColumn
+ */

package/lib/components/organisms/FuroTabs/FuroTabs.vue

@@ -0,0 +1,403 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Tabs as RekaTabs,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroTabsContext from './FuroTabsContext.js'
+
+export default defineComponent({
+  name: 'FuroTabs',
+
+  components: {
+    FuroIcon,
+    TabsRoot: RekaTabs['Root'],
+    TabsBar: RekaTabs['List'],
+    TabsTrigger: RekaTabs['Trigger'],
+    TabsContent: RekaTabs['Content'],
+    TabsIndicator: RekaTabs['Indicator'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroTabsContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroTabsContext.js').FuroTabsSlots} */ (Object),
+  emits: FuroTabsContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroTabsContext.js').FuroTabsSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroTabsContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <TabsRoot
+    :class="context.extractRootClassNames()"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    @update:model-value="context.onTabChange({
+      value: $event,
+    })"
+  >
+    <div class="scroll">
+      <button
+        v-if="context.isScrollable()"
+        type="button"
+        class="scroll-button previous"
+        :disabled="!context.canScrollPrevious()"
+        :aria-label="context.extractScrollPreviousLabel()"
+        @click="context.onScrollPrevious()"
+      >
+        <slot name="scroll-previous-icon">
+          <FuroIcon
+            :name="context.extractScrollPreviousIcon()"
+            class="icon"
+          />
+        </slot>
+      </button>
+
+      <div
+        :ref="context.viewportElementRef"
+        class="viewport"
+        @scroll="context.onScroll()"
+      >
+        <TabsBar class="tabs">
+          <TabsTrigger
+            v-for="entry in context.tabEntries"
+            :key="entry.value"
+            v-bind="context.buildTriggerAttributes({
+              entry,
+            })"
+            :class="context.buildTriggerClassNames({
+              entry,
+            })"
+          >
+            <slot
+              :name="entry.triggerSlotName"
+              :value="entry.value"
+              :label="entry.label"
+            >
+              {{ entry.label }}
+            </slot>
+          </TabsTrigger>
+
+          <TabsIndicator
+            v-if="context.shouldShowIndicator()"
+            class="indicator"
+          >
+            <span class="bar" />
+          </TabsIndicator>
+        </TabsBar>
+      </div>
+
+      <button
+        v-if="context.isScrollable()"
+        type="button"
+        class="scroll-button next"
+        :disabled="!context.canScrollNext()"
+        :aria-label="context.extractScrollNextLabel()"
+        @click="context.onScrollNext()"
+      >
+        <slot name="scroll-next-icon">
+          <FuroIcon
+            :name="context.extractScrollNextIcon()"
+            class="icon"
+          />
+        </slot>
+      </button>
+    </div>
+
+    <template v-if="context.shouldShowPanels()">
+      <TabsContent
+        v-for="entry in context.tabEntries"
+        :key="entry.value"
+        class="content"
+        :value="entry.value"
+      >
+        <slot
+          :name="entry.panelSlotName"
+          :value="entry.value"
+        />
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>
+
+<style>
+@layer furo {
+  .unit-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+  }
+
+  .unit-tabs.vertical {
+    flex-direction: row;
+  }
+
+  .unit-tabs.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* scroll affordance */
+
+  .unit-tabs > .scroll {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    min-width: 0;
+  }
+
+  .unit-tabs.vertical > .scroll {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .unit-tabs > .scroll > .viewport {
+    min-width: 0;
+    overflow: visible;
+  }
+
+  .unit-tabs.scrollable > .scroll > .viewport {
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+  }
+
+  .unit-tabs.scrollable > .scroll > .viewport::-webkit-scrollbar {
+    display: none;
+  }
+
+  .unit-tabs.scrollable.vertical > .scroll > .viewport {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .unit-tabs > .scroll > .scroll-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 2rem;
+    height: 2rem;
+
+    border: none;
+    border-radius: var(--size-border-radius-small);
+
+    background-color: transparent;
+    color: var(--color-foreground);
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color, opacity;
+  }
+
+  .unit-tabs > .scroll > .scroll-button:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-tabs > .scroll > .scroll-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-tabs > .scroll > .scroll-button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .unit-tabs > .scroll > .scroll-button > .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* trigger row */
+
+  .unit-tabs .tabs {
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    width: max-content;
+  }
+
+  .unit-tabs.vertical .tabs {
+    flex-direction: column;
+    align-items: stretch;
+
+    width: auto;
+  }
+
+  .unit-tabs .tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    border: none;
+
+    background-color: transparent;
+    color: var(--color-muted-foreground);
+    font: var(--font-label-small);
+    white-space: nowrap;
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color;
+  }
+
+  .unit-tabs .tab:hover {
+    color: var(--color-foreground);
+  }
+
+  .unit-tabs .tab[data-state="active"] {
+    color: var(--color-foreground);
+  }
+
+  .unit-tabs .tab:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-tabs .tab:disabled {
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* line variant — underline + sliding indicator */
+
+  .unit-tabs.line .tabs {
+    border-block-end: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .unit-tabs.line.vertical .tabs {
+    border-block-end: none;
+    border-inline-end: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .unit-tabs.line .tab {
+    border-radius: var(--size-border-radius-small) var(--size-border-radius-small) 0 0;
+
+    padding-block: 0.5rem;
+    padding-inline: 0.875rem;
+  }
+
+  .unit-tabs.line .indicator {
+    position: absolute;
+    inset-block-end: 0;
+    left: 0;
+
+    width: var(--reka-tabs-indicator-size);
+    height: 0.125rem;
+
+    transition-duration: var(--transition-timer);
+    transition-property: transform, width;
+    transform: translateX(var(--reka-tabs-indicator-position));
+  }
+
+  .unit-tabs.line.vertical .indicator {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    left: auto;
+
+    width: 0.125rem;
+    height: var(--reka-tabs-indicator-size);
+
+    transform: translateY(var(--reka-tabs-indicator-position));
+  }
+
+  .unit-tabs.line .indicator > .bar {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: var(--size-border-radius-small);
+
+    background-color: var(--color-primary);
+  }
+
+  /* solid variant — segmented control */
+
+  .unit-tabs.solid .tabs {
+    gap: var(--size-space-tiny);
+
+    border-radius: var(--size-border-radius-medium);
+
+    padding: 0.25rem;
+
+    background-color: var(--color-muted);
+  }
+
+  .unit-tabs.solid .tab {
+    border-radius: var(--size-border-radius-small);
+
+    padding-block: 0.375rem;
+    padding-inline: 0.75rem;
+  }
+
+  .unit-tabs.solid .tab[data-state="active"] {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  /* panels */
+
+  .unit-tabs > .content {
+    flex: 1;
+
+    min-width: 0;
+
+    font: var(--font-body-medium);
+  }
+
+  .unit-tabs > .content:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+}
+</style>