@pequity/squirrel 8.0.1 → 8.1.0

package/squirrel/components/p-steps/p-steps.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex items-center gap-2">
+    <template v-for="(step, idx) in steps" :key="step">
+      <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold" :class="stepClasses(step, idx)">
+        {{ stepTitle(step) }}
+      </div>
+      <div v-if="idx < steps.length - 1" class="flex items-center">
+        <PIcon
+          icon="material-symbols:arrow-right-alt-rounded"
+          :class="[currentStepIndex <= idx ? 'text-p-gray-30' : 'text-p-blue-50']"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends readonly string[]">
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import { startCase } from 'lodash-es';
+import { computed } from 'vue';
+
+type Props = {
+  steps: T;
+  currentStep: T[number];
+  stepTitleMap?: Partial<Record<T[number], string>>;
+};
+
+const props = defineProps<Props>();
+
+const currentStepIndex = computed(() => props.steps.findIndex((s) => s === props.currentStep));
+
+const stepClasses = (step: T[number], stepIndex: number) => {
+  if (step === props.currentStep) {
+    return 'border border-p-blue-50 bg-p-blue-50 text-surface';
+  }
+
+  if (currentStepIndex.value < stepIndex) {
+    return 'border border-p-gray-30 text-p-gray-30';
+  }
+
+  return 'border border-p-blue-50 text-p-blue-50';
+};
+
+const stepTitle = (step: T[number]) => {
+  return props.stepTitleMap?.[step] || startCase(step);
+};
+</script>