feat(packages): ui: add stepper

Author: honghuangdc

packages/primitives/src/components/stepper/stepper-item.vue

@@ -3,7 +3,7 @@ import { computed, toRefs } from 'vue';
 import { useForwardExpose, useId } from '../../composables';
 import { Primitive } from '../primitive';
 import { injectStepperRootContext, provideStepperItemContext } from './context';
-import type { StepperItemPropsWithPrimitive } from './types';
+import type { StepperItemPropsWithPrimitive, StepperState } from './types';
 
 defineOptions({
   name: 'StepperItem'
@@ -23,7 +23,7 @@ const rootContext = injectStepperRootContext();
 const titleId = useId(undefined, 'soybean-stepper-item-title');
 const descriptionId = useId(undefined, 'soybean-stepper-item-description');
 
-const itemState = computed(() => {
+const itemState = computed<StepperState>(() => {
   if (completed.value) return 'completed';
   if (rootContext.modelValue.value === step.value) return 'active';
   if (rootContext.modelValue.value! > step.value) return 'completed';

packages/primitives/src/composables/use-forward-expose.ts

@@ -10,8 +10,8 @@ export function useForwardExpose<T extends ComponentPublicInstance>() {
   const currentElement = computed<HTMLElement>(() => {
     // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
 
-    return ['#text', '#comment'].includes((currentRef.value as ComponentPublicInstance)?.$el.nodeName)
-      ? (currentRef.value as ComponentPublicInstance)?.$el.nextElementSibling
+    return ['#text', '#comment'].includes((currentRef.value as ComponentPublicInstance)?.$el?.nodeName)
+      ? (currentRef.value as ComponentPublicInstance)?.$el?.nextElementSibling
       : unrefElement(currentRef as MaybeComputedElementRef<MaybeElement>);
   });
 

packages/ui/src/components/index.ts

@@ -38,6 +38,7 @@ export * from './separator';
 export * from './sheet';
 export * from './skeleton';
 export * from './slider';
+export * from './stepper';
 export * from './switch';
 export * from './tabs';
 export * from './tags-input';

packages/ui/src/components/stepper/index.ts

@@ -0,0 +1,21 @@
+import SStepperRoot from './stepper-root.vue';
+import SStepperDescription from './stepper-description.vue';
+import SStepperIndicator from './stepper-indicator.vue';
+import SStepperItem from './stepper-item.vue';
+import SStepperSeparator from './stepper-separator.vue';
+import SStepperTitle from './stepper-title.vue';
+import SStepperTrigger from './stepper-trigger.vue';
+import SStepper from './stepper.vue';
+
+export {
+  SStepperRoot,
+  SStepperDescription,
+  SStepperIndicator,
+  SStepperItem,
+  SStepperSeparator,
+  SStepperTitle,
+  SStepperTrigger,
+  SStepper
+};
+
+export * from './types';

packages/ui/src/components/stepper/stepper-description.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperDescription } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperDescriptionProps } from './types';
+
+defineOptions({
+  name: 'SStepperDescription'
+});
+
+const { class: cls } = defineProps<StepperDescriptionProps>();
+
+const { description } = stepperVariants();
+
+const mergedCls = computed(() => cn(description(), cls));
+</script>
+
+<template>
+  <StepperDescription :class="mergedCls">
+    <slot />
+  </StepperDescription>
+</template>

packages/ui/src/components/stepper/stepper-indicator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperIndicator } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperIndicatorProps } from './types';
+
+defineOptions({
+  name: 'SStepperIndicator'
+});
+
+const { class: cls } = defineProps<StepperIndicatorProps>();
+
+const { indicator } = stepperVariants();
+
+const mergedCls = computed(() => cn(indicator(), cls));
+</script>
+
+<template>
+  <StepperIndicator :class="mergedCls">
+    <slot />
+  </StepperIndicator>
+</template>

packages/ui/src/components/stepper/stepper-item.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperItem, useForwardProps } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperItemProps } from './types';
+
+defineOptions({
+  name: 'SStepperItem'
+});
+
+const { class: cls, orientation, ...delegatedProps } = defineProps<StepperItemProps>();
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const mergedCls = computed(() => {
+  const { item } = stepperVariants({ orientation });
+
+  return cn(item(), cls);
+});
+</script>
+
+<template>
+  <StepperItem v-slot="slotProps" v-bind="forwardedProps" :class="mergedCls">
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>

packages/ui/src/components/stepper/stepper-root.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperRootEmits, StepperRootProps } from './types';
+
+defineOptions({
+  name: 'SStepperRoot'
+});
+
+const { class: cls, orientation, ...delegatedProps } = defineProps<StepperRootProps>();
+
+const emit = defineEmits<StepperRootEmits>();
+
+const forwarded = useForwardPropsEmits(delegatedProps, emit);
+
+const mergedCls = computed(() => {
+  const { root } = stepperVariants({ orientation });
+
+  return cn(root(), cls);
+});
+</script>
+
+<template>
+  <StepperRoot v-slot="slotProps" v-bind="forwarded" :class="mergedCls">
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>

packages/ui/src/components/stepper/stepper-separator.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperSeparator, useForwardProps } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperSeparatorProps } from './types';
+
+defineOptions({
+  name: 'SStepperSeparator'
+});
+
+const { class: cls, orientation, ...delegatedProps } = defineProps<StepperSeparatorProps>();
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const mergedCls = computed(() => {
+  const { separator } = stepperVariants({ orientation });
+
+  return cn(separator(), cls);
+});
+</script>
+
+<template>
+  <StepperSeparator v-bind="forwardedProps" :class="mergedCls">
+    <slot />
+  </StepperSeparator>
+</template>

packages/ui/src/components/stepper/stepper-title.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperTitle } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperTitleProps } from './types';
+
+defineOptions({
+  name: 'SStepperTitle'
+});
+
+const { class: cls } = defineProps<StepperTitleProps>();
+
+const { title } = stepperVariants();
+
+const mergedCls = computed(() => cn(title(), cls));
+</script>
+
+<template>
+  <StepperTitle :class="mergedCls">
+    <slot />
+  </StepperTitle>
+</template>

packages/ui/src/components/stepper/stepper-trigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { StepperTrigger } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import type { StepperTriggerProps } from './types';
+
+defineOptions({
+  name: 'SStepperTrigger'
+});
+
+const { class: cls, as, asChild } = defineProps<StepperTriggerProps>();
+
+const { trigger } = stepperVariants();
+
+const mergedCls = computed(() => cn(trigger(), cls));
+</script>
+
+<template>
+  <StepperTrigger :class="mergedCls" :as="as" :as-child="asChild">
+    <slot />
+  </StepperTrigger>
+</template>

packages/ui/src/components/stepper/stepper.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts" generic="T extends StepperOptionData = StepperOptionData">
+import { computed } from 'vue';
+import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import { cn, stepperVariants } from '@soybean-ui/variants';
+import { Check, Circle, Dot } from 'lucide-vue-next';
+import SButton from '../button/button.vue';
+import SStepperRoot from './stepper-root.vue';
+import SStepperDescription from './stepper-description.vue';
+import SStepperIndicator from './stepper-indicator.vue';
+import SStepperItem from './stepper-item.vue';
+import SStepperSeparator from './stepper-separator.vue';
+import SStepperTitle from './stepper-title.vue';
+import SStepperTrigger from './stepper-trigger.vue';
+import type { StepperEmits, StepperOptionData, StepperProps } from './types';
+
+defineOptions({
+  name: 'SStepper'
+});
+
+const { class: cls, ui, items, ...delegatedRootProps } = defineProps<StepperProps<T>>();
+
+const emit = defineEmits<StepperEmits>();
+
+const forwardedRoot = useForwardPropsEmits(delegatedRootProps, emit);
+
+const titleDescWrapperCls = computed(() => {
+  const { titleDescWrapper } = stepperVariants({ orientation: delegatedRootProps.orientation });
+
+  return cn(titleDescWrapper(), ui?.titleDescWrapper);
+});
+</script>
+
+<template>
+  <SStepperRoot v-bind="forwardedRoot" :class="cls || ui?.root">
+    <template v-for="(item, index) in items" :key="index">
+      <slot name="item" :item="item" :index="index">
+        <SStepperItem
+          v-slot="{ state }"
+          :class="ui?.item"
+          :orientation="orientation"
+          :step="item.step"
+          :disabled="item.disabled"
+          :completed="item.completed"
+        >
+          <SStepperSeparator
+            v-if="item.step !== items[items.length - 1].step"
+            :class="ui?.separator"
+            :orientation="orientation"
+          />
+          <SStepperIndicator v-if="item.indicatorLabel" :class="ui?.indicator">
+            <component :is="item.icon" />
+            <span v-if="item.indicatorLabel">{{ item.indicatorLabel }}</span>
+          </SStepperIndicator>
+          <slot name="trigger" :item="item" :state="state">
+            <SStepperTrigger :class="ui?.trigger" as-child>
+              <SButton
+                :variant="state == 'completed' || state == 'active' ? 'solid' : 'outline'"
+                shape="circle"
+                class="z-10"
+                :class="{ 'ring-2 ring-primary ring-offset-2 ring-offset-background': state === 'active' }"
+              >
+                <Check v-if="state == 'completed'" />
+                <Circle v-if="state == 'active'" />
+                <Dot v-if="state == 'inactive'" />
+              </SButton>
+            </SStepperTrigger>
+          </slot>
+          <div :class="titleDescWrapperCls">
+            <SStepperTitle :class="ui?.title">{{ item.title }}</SStepperTitle>
+            <SStepperDescription :class="ui?.description">{{ item.description }}</SStepperDescription>
+          </div>
+        </SStepperItem>
+      </slot>
+    </template>
+  </SStepperRoot>
+</template>

packages/ui/src/components/stepper/types.ts

@@ -0,0 +1,51 @@
+import type { Component } from 'vue';
+import type {
+  ClassValue,
+  StepperRootEmits,
+  StepperTriggerPropsWithPrimitive,
+  StepperDescriptionProps as _StepperDescriptionProps,
+  StepperIndicatorProps as _StepperIndicatorProps,
+  StepperItemProps as _StepperItemProps,
+  StepperRootProps as _StepperRootProps,
+  StepperSeparatorProps as _StepperSeparatorProps,
+  StepperTitleProps as _StepperTitleProps
+} from '@soybean-ui/primitives';
+import type { StepperSlots, ThemeOrientation } from '@soybean-ui/variants';
+
+export interface StepperRootProps extends _StepperRootProps {
+  orientation?: ThemeOrientation;
+}
+
+export interface StepperDescriptionProps extends _StepperDescriptionProps {}
+
+export interface StepperIndicatorProps extends _StepperIndicatorProps {}
+
+export interface StepperItemProps extends _StepperItemProps {
+  orientation?: ThemeOrientation;
+}
+
+export interface StepperSeparatorProps extends _StepperSeparatorProps {
+  orientation?: ThemeOrientation;
+}
+
+export interface StepperTitleProps extends _StepperTitleProps {}
+
+export interface StepperTriggerProps extends StepperTriggerPropsWithPrimitive {}
+
+export interface StepperOptionData extends Pick<StepperItemProps, 'step' | 'disabled' | 'completed'> {
+  title: string;
+  description: string;
+  indicatorLabel?: string;
+  icon?: Component;
+}
+
+export type StepperUi = Partial<Record<StepperSlots, ClassValue>>;
+
+export interface StepperProps<T extends StepperOptionData = StepperOptionData> extends StepperRootProps {
+  ui?: StepperUi;
+  items: T[];
+}
+
+export type StepperEmits = StepperRootEmits;
+
+export type { StepperRootEmits };

packages/variants/src/index.ts

@@ -36,6 +36,7 @@ export * from './variants/separator';
 export * from './variants/sheet';
 export * from './variants/skeleton';
 export * from './variants/slider';
+export * from './variants/stepper';
 export * from './variants/switch';
 export * from './variants/tabs';
 export * from './variants/tags-input';