@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroSidebar/FuroSidebar.vue

@@ -0,0 +1,473 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroSearchField from '../../molecules/FuroSearchField/FuroSearchField.vue'
+import FuroSidebarContext from './FuroSidebarContext.js'
+
+export default defineComponent({
+  name: 'FuroSidebar',
+
+  components: {
+    FuroIcon,
+    FuroSearchField,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroSidebarContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroSidebarContext.js').FuroSidebarSlots} */ (Object),
+  emits: FuroSidebarContext.EMIT_EVENT_HASH,
+
+  /**
+   * Setup of this component.
+   *
+   * @type {import('./FuroSidebarContext.js').FuroSidebarSetup}
+   */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSidebarContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <nav
+    :class="context.extractRootClassNames()"
+    v-bind="context.buildRootAttributes({
+      attrs: $attrs,
+    })"
+  >
+    <div
+      v-if="context.hasHeaderSlot()"
+      class="header"
+    >
+      <slot name="header" />
+    </div>
+
+    <div
+      v-if="context.shouldShowSearch()"
+      class="search-entry"
+    >
+      <slot name="search">
+        <FuroSearchField
+          :parcel="context.buildSearchParcel()"
+          v-bind="context.extractSearchAttributes()"
+          @change-value="context.onSearchChange({
+            payload: $event,
+          })"
+          @commit-value="context.onSearchCommit({
+            payload: $event,
+          })"
+        />
+      </slot>
+    </div>
+
+    <div class="groups">
+      <div
+        v-for="group in context.groupEntries"
+        :key="group.key"
+        class="group"
+      >
+        <p
+          v-if="context.shouldShowGroupLabel({
+            group,
+          })"
+          class="group-label"
+        >
+          {{ group.label }}
+        </p>
+
+        <ul
+          class="items"
+          :aria-label="group.label"
+        >
+          <li
+            v-for="entry in group.items"
+            :key="entry.key"
+            class="entry"
+          >
+            <slot
+              name="item"
+              :entry="entry"
+              :active="context.isActiveEntry({
+                key: entry.key,
+              })"
+              :expanded="context.isExpandedEntry({
+                key: entry.key,
+              })"
+              :collapsed="context.isCollapsed()"
+            >
+              <button
+                type="button"
+                :class="context.extractItemClassNames({
+                  entry,
+                })"
+                v-bind="context.buildItemAttributes({
+                  entry,
+                })"
+                @click="context.onActivateEntry({
+                  entry,
+                })"
+              >
+                <span
+                  v-if="entry.hasIcon"
+                  class="row-icon"
+                >
+                  <FuroIcon
+                    :name="entry.icon"
+                    class="icon"
+                  />
+                </span>
+
+                <span
+                  v-if="context.shouldShowLabel()"
+                  class="label"
+                >
+                  {{ entry.label }}
+                </span>
+
+                <FuroIcon
+                  v-if="context.shouldShowDisclosureIcon({
+                    entry,
+                  })"
+                  :name="context.extractDisclosureIconName({
+                    entry,
+                  })"
+                  class="caret"
+                />
+              </button>
+            </slot>
+
+            <ul
+              v-if="context.shouldShowSubItems({
+                entry,
+              })"
+              class="sub-items"
+            >
+              <li
+                v-for="subEntry in entry.subItems"
+                :key="subEntry.key"
+                class="sub-entry"
+              >
+                <slot
+                  name="sub-item"
+                  :entry="subEntry"
+                  :parent="entry"
+                  :active="context.isActiveEntry({
+                    key: subEntry.key,
+                  })"
+                >
+                  <button
+                    type="button"
+                    :class="context.extractSubItemClassNames({
+                      entry: subEntry,
+                    })"
+                    v-bind="context.buildSubItemAttributes({
+                      entry: subEntry,
+                    })"
+                    @click="context.onActivateSubEntry({
+                      entry: subEntry,
+                      parentEntry: entry,
+                    })"
+                  >
+                    {{ subEntry.label }}
+                  </button>
+                </slot>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div
+      v-if="context.hasFooterSlot()"
+      class="footer"
+    >
+      <slot name="footer" />
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-sidebar {
+    border-inline-end: var(--size-thinnest) solid var(--color-border);
+
+    width: var(--size-sidebar-width);
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-compact);
+
+    padding-block: 0.75rem;
+    padding-inline: 1rem;
+
+    background-color: var(--color-background);
+
+    transition-duration: var(--transition-timer);
+    transition-property: width;
+  }
+
+  .unit-sidebar.collapsed {
+    width: var(--size-sidebar-width-collapsed);
+  }
+
+  /* regions */
+
+  .unit-sidebar > .header {
+    display: flex;
+    align-items: center;
+
+    min-height: 1.75rem;
+  }
+
+  .unit-sidebar > .groups {
+    flex: 1;
+
+    min-height: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-compact);
+
+    overflow-y: auto;
+  }
+
+  .unit-sidebar > .groups > .group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-sidebar .group-label {
+    margin-block: 0;
+
+    padding-block: 0.5rem;
+    padding-inline: 0.5rem;
+
+    color: var(--color-foreground-tertiary);
+    font: var(--font-label-tiny);
+  }
+
+  .unit-sidebar .items {
+    margin-block: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+
+    padding-inline-start: 0;
+
+    list-style: none;
+  }
+
+  /* primary row */
+
+  .unit-sidebar .row {
+    border: none;
+    border-radius: var(--size-border-radius-large);
+
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-compact);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.25rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground-title);
+    font: var(--font-label-small);
+    text-align: start;
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-sidebar .row.disclosure {
+    padding-inline-end: 0.625rem;
+  }
+
+  .unit-sidebar .row:hover,
+  .unit-sidebar .row.active {
+    background-color: var(--color-muted);
+  }
+
+  .unit-sidebar .row:focus-visible {
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+
+    outline: none;
+  }
+
+  .unit-sidebar .row:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    opacity: 0.5;
+  }
+
+  .unit-sidebar.collapsed .row,
+  .unit-sidebar.collapsed .row.disclosure {
+    justify-content: center;
+
+    padding-inline: 0;
+  }
+
+  .unit-sidebar .row-icon {
+    flex: none;
+
+    border-radius: var(--size-border-radius-medium);
+
+    display: inline-flex;
+    align-items: center;
+
+    padding: 0.375rem;
+
+    background-color: var(--color-background);
+  }
+
+  .unit-sidebar .row-icon > .icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .unit-sidebar .row > .label {
+    flex: 1;
+
+    min-width: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .unit-sidebar .row > .caret {
+    flex: none;
+
+    width: 0.875rem;
+    height: 0.875rem;
+
+    color: var(--color-foreground-tertiary);
+  }
+
+  /* nested sub-rows */
+
+  .unit-sidebar .sub-items {
+    margin-block: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-tiny);
+
+    padding-block-start: var(--size-space-tiny);
+    padding-inline-start: 2.25rem;
+
+    list-style: none;
+  }
+
+  .unit-sidebar .sub-entry {
+    position: relative;
+  }
+
+  /*
+    The design draws an elbow connector per sub-item, running from the row above
+    into the sub-item's vertical centre. Adjacent elbows overlap the 4px row gap,
+    which is what makes the vertical run read as one continuous line.
+  */
+  .unit-sidebar .sub-entry::before {
+    content: '';
+
+    position: absolute;
+    inset-block-start: -0.25rem;
+    inset-inline-start: -1rem;
+
+    border-inline-start: var(--size-thinnest) solid var(--color-border);
+    border-block-end: var(--size-thinnest) solid var(--color-border);
+    border-end-start-radius: var(--size-border-radius-small);
+
+    width: 1rem;
+    height: 1.375rem;
+  }
+
+  .unit-sidebar .sub-row {
+    border: none;
+    border-radius: var(--size-border-radius-large);
+
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+
+    background-color: transparent;
+
+    color: var(--color-foreground-tertiary);
+    font: var(--font-label-small);
+    text-align: start;
+
+    cursor: pointer;
+
+    appearance: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, color;
+  }
+
+  .unit-sidebar .sub-row:hover {
+    background-color: var(--color-muted);
+  }
+
+  .unit-sidebar .sub-row.active {
+    background-color: var(--color-muted);
+
+    color: var(--color-foreground-title);
+  }
+
+  .unit-sidebar .sub-row:focus-visible {
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+
+    outline: none;
+  }
+
+  .unit-sidebar .sub-row:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    opacity: 0.5;
+  }
+}
+</style>