@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroStepper/FuroStepper.vue

@@ -0,0 +1,345 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Stepper as RekaStepper,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroStepperContext from './FuroStepperContext.js'
+
+export default defineComponent({
+  name: 'FuroStepper',
+
+  components: {
+    FuroIcon,
+    StepperRoot: RekaStepper['Root'],
+    StepperStep: RekaStepper['Item'],
+    StepperTrigger: RekaStepper['Trigger'],
+    StepperIndicator: RekaStepper['Indicator'],
+    StepperSeparator: RekaStepper['Separator'],
+    StepperTitle: RekaStepper['Title'],
+    StepperDescription: RekaStepper['Description'],
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroStepperContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroStepperContext.js').FuroStepperSlots} */ (Object),
+  emits: FuroStepperContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroStepperContext.js').FuroStepperSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroStepperContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <StepperRoot
+    :class="context.extractRootClassNames()"
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    @update:model-value="context.onStepChange({
+      value: $event,
+    })"
+  >
+    <div class="steps">
+      <StepperStep
+        v-for="(entry, index) in context.stepEntries"
+        :key="entry.value"
+        class="step"
+        :step="entry.step"
+        :disabled="entry.disabled"
+      >
+        <StepperSeparator
+          v-if="context.hasSeparatorAfter({ index })"
+          class="separator"
+        />
+
+        <StepperTrigger class="trigger">
+          <StepperIndicator class="indicator">
+            <slot
+              :name="entry.indicatorSlotName"
+              :step="entry.step"
+              :value="entry.value"
+              :completed="context.isCompletedStep({ step: entry.step })"
+            >
+              <FuroIcon
+                v-if="context.isCompletedStep({ step: entry.step })"
+                name="ph:check"
+                class="icon"
+              />
+              <span
+                v-else
+                class="number"
+              >
+                {{ entry.step }}
+              </span>
+            </slot>
+          </StepperIndicator>
+        </StepperTrigger>
+
+        <div
+          v-if="entry.title || entry.description"
+          class="labels"
+        >
+          <StepperTitle class="title">
+            <slot
+              :name="entry.titleSlotName"
+              :value="entry.value"
+            >
+              {{ entry.title }}
+            </slot>
+          </StepperTitle>
+
+          <StepperDescription
+            v-if="entry.description"
+            class="description"
+          >
+            {{ entry.description }}
+          </StepperDescription>
+        </div>
+      </StepperStep>
+    </div>
+
+    <template v-if="context.shouldShowPanels()">
+      <div
+        v-for="entry in context.stepEntries"
+        v-show="context.isActiveStep({ step: entry.step })"
+        :key="entry.value"
+        class="content"
+      >
+        <slot
+          :name="entry.panelSlotName"
+          :value="entry.value"
+          :step="entry.step"
+        />
+      </div>
+    </template>
+  </StepperRoot>
+</template>
+
+<style>
+@layer furo {
+  .unit-stepper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-large);
+  }
+
+  .unit-stepper.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* step rail */
+
+  .unit-stepper > .steps {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--size-space-small);
+
+    width: 100%;
+  }
+
+  .unit-stepper.vertical > .steps {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--size-space-large);
+  }
+
+  .unit-stepper > .steps > .step {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1 1 0;
+
+    min-width: 0;
+
+    text-align: center;
+  }
+
+  .unit-stepper.vertical > .steps > .step {
+    flex-direction: row;
+    align-items: flex-start;
+    flex: none;
+    gap: var(--size-space-medium);
+
+    text-align: start;
+  }
+
+  /* trigger — wraps the indicator circle only */
+
+  .unit-stepper .trigger {
+    position: relative;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    border: none;
+
+    background-color: transparent;
+
+    cursor: pointer;
+
+    appearance: none;
+  }
+
+  .unit-stepper .trigger:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* indicator circle */
+
+  .unit-stepper .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    width: 2rem;
+    height: 2rem;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: 50%;
+
+    background-color: var(--color-background);
+    color: var(--color-muted-foreground);
+    font: var(--font-label-small);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color, border-color, color;
+  }
+
+  .unit-stepper .indicator > .icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .unit-stepper .trigger:focus-visible > .indicator {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-stepper [data-state="active"] .indicator {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  .unit-stepper [data-state="completed"] .indicator {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  /* labels */
+
+  .unit-stepper .labels {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-space-none);
+  }
+
+  .unit-stepper:not(.vertical) .labels {
+    align-items: center;
+
+    margin-block-start: 0.75rem;
+  }
+
+  .unit-stepper .title {
+    color: var(--color-muted-foreground);
+    font: var(--font-label-small);
+  }
+
+  .unit-stepper [data-state="active"] .title,
+  .unit-stepper [data-state="completed"] .title {
+    color: var(--color-foreground);
+  }
+
+  .unit-stepper .description {
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+  }
+
+  /* connector — absolutely positioned, bridges adjacent indicator centers */
+
+  .unit-stepper .separator {
+    position: absolute;
+    z-index: 0;
+
+    inset-block-start: 1rem;
+    inset-inline-start: calc(50% + 1.25rem);
+    inset-inline-end: calc(-50% + 0.75rem);
+
+    height: 0.125rem;
+
+    border-radius: 0.0625rem;
+
+    background-color: var(--color-border);
+
+    transform: translateY(-50%);
+
+    transition-duration: var(--transition-timer);
+    transition-property: background-color;
+  }
+
+  .unit-stepper.vertical .separator {
+    inset-block-start: 2.5rem;
+    inset-block-end: calc(-1 * var(--size-space-large));
+    inset-inline-start: 1rem;
+    inset-inline-end: auto;
+
+    width: 0.125rem;
+    height: auto;
+
+    transform: translateX(-50%);
+  }
+
+  .unit-stepper [data-state="completed"] .separator {
+    background-color: var(--color-primary);
+  }
+
+  /* panels */
+
+  .unit-stepper > .content {
+    min-width: 0;
+
+    font: var(--font-body-medium);
+  }
+}
+</style>