@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroTable/FuroTable.vue

@@ -0,0 +1,707 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroCheckbox from '../../atoms/FuroCheckbox/FuroCheckbox.vue'
+
+import FuroTableContext from './FuroTableContext.js'
+
+export default defineComponent({
+  name: 'FuroTable',
+
+  components: {
+    FuroIcon,
+    FuroCheckbox,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroTableContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroTableContext.js').FuroTableSlots} */ (Object),
+  emits: FuroTableContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroTableContext.js').FuroTableSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroTableContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="context.extractRootClassNames()"
+    :aria-busy="context.extractAriaBusyAttribute()"
+    v-bind="$attrs"
+  >
+    <div
+      class="table-scroll"
+      :style="context.extractScrollStyle()"
+      :inert="context.extractInertAttribute()"
+      @scroll="context.onScrollEvent($event)"
+    >
+      <table class="table">
+        <colgroup>
+          <col
+            v-if="context.isSelectable()"
+            class="selection-col"
+            :style="context.extractSelectionColStyle()"
+          >
+          <col
+            v-for="column in context.extractColumns()"
+            :key="column.field"
+            :style="context.extractColumnColStyle({ column })"
+          >
+          <col
+            v-if="context.hasRowActionsColumn()"
+            class="actions-col"
+            :style="context.extractRowActionsColStyle()"
+          >
+        </colgroup>
+
+        <thead class="head">
+          <tr class="head-row">
+            <th
+              v-if="context.isSelectable()"
+              class="selection-cell"
+            >
+              <FuroCheckbox
+                :parcel="context.extractSelectAllParcel()"
+                @change-value="context.onToggleSelectAll()"
+              />
+            </th>
+
+            <th
+              v-for="(column, columnIndex) in context.extractColumns()"
+              :key="column.field"
+              class="header-cell"
+              :style="{
+                textAlign: context.extractColumnAlign({ column }),
+              }"
+            >
+              <span
+                class="header-label"
+                :class="{
+                  sortable: context.isColumnSortable({ column }),
+                }"
+                :role="context.isColumnSortable({ column })
+                  ? 'button'
+                  : undefined"
+                :tabindex="context.isColumnSortable({ column })
+                  ? 0
+                  : undefined"
+                @click="context.onHeaderClick({ column })"
+                @keydown.enter.prevent="context.onHeaderClick({ column })"
+                @keydown.space.prevent="context.onHeaderClick({ column })"
+              >
+                <span class="label-text">
+                  <slot
+                    name="header-cell"
+                    :column="column"
+                  >
+                    {{ context.extractColumnLabel({ column }) }}
+                  </slot>
+                </span>
+
+                <slot
+                  v-if="context.isColumnSortable({ column })"
+                  name="sort-icon"
+                  :column="column"
+                >
+                  <FuroIcon
+                    :name="context.extractSortIconName({ column })"
+                    class="sort-icon"
+                    :class="{
+                      active: context.isSortedBy({ column }),
+                    }"
+                  />
+                </slot>
+              </span>
+
+              <span
+                v-if="context.canResizeColumn({ columnIndex })"
+                class="resize-handle"
+                @pointerdown="context.onColumnResizeStart({
+                  column,
+                  pointerEvent: $event,
+                })"
+                @pointermove="context.onColumnResizeMove({
+                  pointerEvent: $event,
+                })"
+                @pointerup="context.onColumnResizeEnd({
+                  pointerEvent: $event,
+                })"
+              />
+            </th>
+
+            <th
+              v-if="context.hasRowActionsColumn()"
+              class="actions-cell"
+            >
+              {{ context.extractRowActionsLabel() }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="body">
+          <tr
+            v-if="context.shouldShowError()"
+            class="state-row error"
+          >
+            <td :colspan="context.extractTotalColumnCount()">
+              <slot
+                name="error"
+                :message="context.extractErrorMessage()"
+              >
+                {{ context.extractErrorMessage() }}
+              </slot>
+            </td>
+          </tr>
+
+          <tr
+            v-else-if="context.shouldShowLoading()"
+            class="state-row loading"
+          >
+            <td :colspan="context.extractTotalColumnCount()">
+              <slot name="loading">
+                <FuroIcon
+                  name="ph:spinner"
+                  class="spinner-icon"
+                />
+              </slot>
+            </td>
+          </tr>
+
+          <tr
+            v-else-if="context.shouldShowEmpty()"
+            class="state-row empty"
+          >
+            <td :colspan="context.extractTotalColumnCount()">
+              <slot name="empty">
+                {{ context.extractEmptyText() }}
+              </slot>
+            </td>
+          </tr>
+
+          <template v-else-if="context.isVirtual()">
+            <tr
+              v-if="context.extractLeadingSpacerHeight() > 0"
+              class="spacer"
+            >
+              <td
+                :colspan="context.extractTotalColumnCount()"
+                :style="{
+                  height: `${context.extractLeadingSpacerHeight()}px`,
+                }"
+              />
+            </tr>
+
+            <tr
+              v-for="entry in context.createVirtualRowItemContexts()"
+              :key="entry.index"
+              class="data-row"
+              :class="{
+                selected: entry.rowContext?.isSelected(),
+              }"
+              :style="context.extractRowStyle()"
+              @click="context.onVirtualRowClick({ entry })"
+            >
+              <template v-if="entry.rowContext">
+                <td
+                  v-if="context.isSelectable()"
+                  class="selection-cell"
+                  @click.stop
+                >
+                  <FuroCheckbox
+                    :parcel="context.extractRowSelectionParcel({
+                      rowContext: entry.rowContext,
+                    })"
+                    @change-value="context.onToggleRow({
+                      rowKey: entry.rowContext.extractKey(),
+                    })"
+                  />
+                </td>
+
+                <td
+                  v-for="column in context.extractColumns()"
+                  :key="column.field"
+                  class="data-cell"
+                  :style="{
+                    textAlign: context.extractColumnAlign({ column }),
+                  }"
+                >
+                  <slot
+                    name="cell"
+                    :row="entry.rowContext.row"
+                    :column="column"
+                    :value="entry.rowContext.extractCellValue({ column })"
+                  >
+                    <span class="cell-text">
+                      {{ entry.rowContext.extractCellValue({ column }) }}
+                    </span>
+                  </slot>
+                </td>
+
+                <td
+                  v-if="context.hasRowActionsColumn()"
+                  class="actions-cell"
+                  @click.stop
+                >
+                  <slot
+                    name="row-actions"
+                    :row="entry.rowContext.row"
+                  />
+                </td>
+              </template>
+
+              <template v-else>
+                <td
+                  v-if="context.isSelectable()"
+                  class="selection-cell"
+                />
+
+                <td
+                  class="placeholder-cell"
+                  :colspan="context.extractPlaceholderColumnCount()"
+                >
+                  <slot
+                    name="placeholder"
+                    :index="entry.index"
+                  >
+                    <span class="skeleton" />
+                  </slot>
+                </td>
+
+                <td
+                  v-if="context.hasRowActionsColumn()"
+                  class="actions-cell"
+                />
+              </template>
+            </tr>
+
+            <tr
+              v-if="context.extractTrailingSpacerHeight() > 0"
+              class="spacer"
+            >
+              <td
+                :colspan="context.extractTotalColumnCount()"
+                :style="{
+                  height: `${context.extractTrailingSpacerHeight()}px`,
+                }"
+              />
+            </tr>
+          </template>
+
+          <template v-else>
+            <tr
+              v-for="rowContext in context.createRowItemContexts()"
+              :key="rowContext.extractKey() ?? undefined"
+              :class="rowContext.extractRowClassNames()"
+              @click="context.onRowClick({ rowContext })"
+            >
+              <td
+                v-if="context.isSelectable()"
+                class="selection-cell"
+                @click.stop
+              >
+                <FuroCheckbox
+                  :parcel="context.extractRowSelectionParcel({ rowContext })"
+                  @change-value="context.onToggleRow({
+                    rowKey: rowContext.extractKey(),
+                  })"
+                />
+              </td>
+
+              <td
+                v-for="column in context.extractColumns()"
+                :key="column.field"
+                class="data-cell"
+                :style="{
+                  textAlign: context.extractColumnAlign({ column }),
+                }"
+              >
+                <slot
+                  name="cell"
+                  :row="rowContext.row"
+                  :column="column"
+                  :value="rowContext.extractCellValue({ column })"
+                >
+                  <span class="cell-text">
+                    {{ rowContext.extractCellValue({ column }) }}
+                  </span>
+                </slot>
+              </td>
+
+              <td
+                v-if="context.hasRowActionsColumn()"
+                class="actions-cell"
+                @click.stop
+              >
+                <slot
+                  name="row-actions"
+                  :row="rowContext.row"
+                />
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <slot name="pagination" />
+
+    <div
+      v-if="context.hasFooterSlot()"
+      class="table-footer"
+    >
+      <slot
+        name="footer"
+        :selection="context.extractFooterSelection()"
+      />
+    </div>
+
+    <div
+      v-if="context.shouldShowLoadingOverlay()"
+      class="loading-overlay"
+    >
+      <span class="overlay-backdrop" />
+
+      <slot name="loading">
+        <FuroIcon
+          name="ph:spinner"
+          class="spinner-icon"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-table {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-medium);
+
+    width: 100%;
+
+    isolation: isolate;
+  }
+
+  .unit-table > .loading-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: calc(var(--value-z-index-layer-content) + 2000);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .unit-table > .loading-overlay > .overlay-backdrop {
+    position: absolute;
+    inset: 0;
+
+    background-color: var(--color-background);
+
+    opacity: 0.6;
+  }
+
+  .unit-table > .loading-overlay > .spinner-icon {
+    position: relative;
+  }
+
+  .unit-table > .table-scroll {
+    position: relative;
+
+    width: 100%;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-medium);
+
+    overflow: auto;
+  }
+
+  .unit-table .table {
+    width: 100%;
+
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    color: var(--color-foreground);
+    font: var(--font-body-medium);
+  }
+
+  .unit-table .head {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: calc(var(--value-z-index-layer-content) + 1000);
+
+    background-color: var(--color-background);
+  }
+
+  .unit-table .head-row {
+    height: 2.75rem;
+
+    border-block-end: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .unit-table :where(.header-cell, .data-cell, .selection-cell, .placeholder-cell, .actions-cell) {
+    padding-inline: 1rem;
+
+    vertical-align: middle;
+  }
+
+  .unit-table .actions-cell {
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  .unit-table .selection-cell {
+    width: 2.75rem;
+
+    padding-inline: 0.5rem;
+
+    text-align: center;
+  }
+
+  .unit-table .header-cell {
+    position: relative;
+
+    color: var(--color-muted-foreground);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .unit-table .header-cell > .header-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+    max-width: 100%;
+
+    border-radius: var(--size-border-radius-small);
+
+    color: inherit;
+  }
+
+  .unit-table .header-cell > .header-label.sortable {
+    cursor: pointer;
+    user-select: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color;
+  }
+
+  .unit-table .header-cell > .header-label.sortable:hover {
+    color: var(--color-foreground);
+  }
+
+  .unit-table .header-cell > .header-label:focus-visible {
+    outline: none;
+
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-table .label-text {
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .unit-table .sort-icon {
+    flex: none;
+
+    width: 0.875rem;
+    height: 0.875rem;
+
+    opacity: 0.4;
+
+    transition-duration: var(--transition-timer);
+    transition-property: opacity;
+  }
+
+  .unit-table .sort-icon.active {
+    opacity: 1;
+  }
+
+  .unit-table .resize-handle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: calc(var(--value-z-index-layer-content) + 1000);
+
+    width: 0.625rem;
+
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .unit-table .resize-handle::after {
+    content: '';
+
+    position: absolute;
+    inset-block: 0.5rem;
+    inset-inline-end: calc(var(--size-thinnest) - 0.125rem);
+
+    width: 0.125rem;
+
+    background-color: var(--color-border);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-table .resize-handle:hover::after {
+    background-color: var(--color-primary);
+  }
+
+  .unit-table .cell-text {
+    display: block;
+
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .unit-table .data-row {
+    height: 2.75rem;
+
+    border-block-end: var(--size-thinnest) solid var(--color-border);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-table .data-row:last-child {
+    border-block-end: none;
+  }
+
+  .unit-table .data-row:hover {
+    background-color: var(--color-muted);
+  }
+
+  .unit-table .data-row.selected {
+    background-color: var(--color-accent);
+  }
+
+  .unit-table.compact .table {
+    font: var(--font-body-small);
+  }
+
+  .unit-table.compact :where(.head-row, .data-row) {
+    height: 2.25rem;
+  }
+
+  .unit-table.compact :where(.header-cell, .data-cell, .placeholder-cell, .actions-cell) {
+    padding-inline: 0.5rem;
+  }
+
+  .unit-table.compact .selection-cell {
+    padding-inline: 0.375rem;
+  }
+
+  .unit-table.grid-lines :where(.header-cell, .data-cell, .selection-cell, .actions-cell):not(:last-child) {
+    border-inline-end: var(--size-thinnest) solid var(--color-border);
+  }
+
+  .unit-table > .table-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-small);
+  }
+
+  .unit-table .spacer,
+  .unit-table .spacer > td {
+    padding: 0;
+
+    border: none;
+  }
+
+  .unit-table .skeleton {
+    display: block;
+
+    width: 60%;
+    height: 0.75rem;
+
+    border-radius: var(--size-border-radius-small);
+
+    background-color: var(--color-muted);
+    background-image: linear-gradient(
+      90deg,
+      var(--color-muted) 25%,
+      var(--color-accent) 37%,
+      var(--color-muted) 63%
+    );
+    background-size: 400% 100%;
+
+    animation: furo-table-shimmer 1.4s ease infinite;
+  }
+
+  .unit-table .state-row > td {
+    padding-block: 2.5rem;
+    padding-inline: 1rem;
+
+    color: var(--color-muted-foreground);
+    text-align: center;
+  }
+
+  .unit-table .state-row.error > td {
+    color: var(--color-destructive);
+  }
+
+  .unit-table .spinner-icon {
+    display: inline-block;
+
+    width: 1.5rem;
+    height: 1.5rem;
+
+    animation: furo-table-spin 1s linear infinite;
+  }
+
+  @keyframes furo-table-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes furo-table-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+</style>