@pequity/squirrel 8.3.1 → 8.3.2

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

@@ -1,21 +1,26 @@
 <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) }}
+    <template v-for="(step, i) in steps" :key="step.value">
+      <div
+        class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold"
+        :class="[stepClasses(step, i), { 'cursor-pointer': clickable && !step.disabled }]"
+        @click="emit('click:step', step, i)"
+      >
+        {{ step.text || startCase(String(step.value)) }}
       </div>
-      <div v-if="idx < steps.length - 1" class="flex items-center">
+      <div v-if="i < 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']"
+          :class="[activeStepIndex <= i ? 'text-p-gray-30' : 'text-p-blue-50']"
         />
       </div>
     </template>
   </div>
 </template>
 
-<script setup lang="ts" generic="T extends readonly string[]">
+<script setup lang="ts">
 import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import type { StepItem } from '@squirrel/components/p-steps/p-steps.types';
 import { startCase } from 'lodash-es';
 import { computed } from 'vue';
 
@@ -24,28 +29,32 @@ defineOptions({
 });
 
 type Props = {
-  steps: T;
-  currentStep: T[number];
-  stepTitleMap?: Partial<Record<T[number], string>>;
+  activeStep?: StepItem['value'];
+  steps?: readonly StepItem[];
+  clickable?: boolean;
 };
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  activeStep: null,
+  steps: () => [],
+  clickable: false,
+});
 
-const currentStepIndex = computed(() => props.steps.findIndex((s) => s === props.currentStep));
+const emit = defineEmits<{
+  'click:step': [step: StepItem, index: number];
+}>();
 
-const stepClasses = (step: T[number], stepIndex: number) => {
-  if (step === props.currentStep) {
-    return 'border border-p-blue-50 bg-p-blue-50 text-surface';
-  }
+const activeStepIndex = computed(() => props.steps.findIndex((s) => s.value === props.activeStep));
 
-  if (currentStepIndex.value < stepIndex) {
-    return 'border border-p-gray-30 text-p-gray-30';
+const stepClasses = (step: StepItem, stepIndex: number) => {
+  if (step.value === props.activeStep) {
+    return 'border-p-blue-50 bg-p-blue-50 text-surface';
   }
 
-  return 'border border-p-blue-50 text-p-blue-50';
-};
+  if (activeStepIndex.value < stepIndex) {
+    return 'border-p-gray-30 text-p-gray-30';
+  }
 
-const stepTitle = (step: T[number]) => {
-  return props.stepTitleMap?.[step] || startCase(step);
+  return 'border-p-blue-50 text-p-blue-50';
 };
 </script>

package/dist/cjs/chunks/p-steps.js

@@ -1,55 +0,0 @@
-"use strict";
-const vue = require("vue");
-const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
-const lodashEs = require("lodash-es");
-const _hoisted_1 = { class: "flex items-center gap-2" };
-const _hoisted_2 = {
-  key: 0,
-  class: "flex items-center"
-};
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "PSteps"
-  },
-  __name: "p-steps",
-  props: {
-    steps: {},
-    currentStep: {},
-    stepTitleMap: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const currentStepIndex = vue.computed(() => props.steps.findIndex((s) => s === props.currentStep));
-    const stepClasses = (step, stepIndex) => {
-      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) => {
-      var _a;
-      return ((_a = props.stepTitleMap) == null ? void 0 : _a[step]) || lodashEs.startCase(step);
-    };
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.steps, (step, idx) => {
-          return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: step }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", stepClasses(step, idx)])
-            }, vue.toDisplayString(stepTitle(step)), 3),
-            idx < _ctx.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
-                icon: "material-symbols:arrow-right-alt-rounded",
-                class: vue.normalizeClass([currentStepIndex.value <= idx ? "text-p-gray-30" : "text-p-blue-50"])
-              }, null, 8, ["class"])
-            ])) : vue.createCommentVNode("", true)
-          ], 64);
-        }), 128))
-      ]);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/es/chunks/p-steps.js

@@ -1,56 +0,0 @@
-import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, createElementVNode, createCommentVNode, normalizeClass, toDisplayString, createVNode } from "vue";
-import { _ as _sfc_main$1 } from "./p-icon.js";
-import { startCase } from "lodash-es";
-const _hoisted_1 = { class: "flex items-center gap-2" };
-const _hoisted_2 = {
-  key: 0,
-  class: "flex items-center"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "PSteps"
-  },
-  __name: "p-steps",
-  props: {
-    steps: {},
-    currentStep: {},
-    stepTitleMap: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const currentStepIndex = computed(() => props.steps.findIndex((s) => s === props.currentStep));
-    const stepClasses = (step, stepIndex) => {
-      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) => {
-      var _a;
-      return ((_a = props.stepTitleMap) == null ? void 0 : _a[step]) || startCase(step);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.steps, (step, idx) => {
-          return openBlock(), createElementBlock(Fragment, { key: step }, [
-            createElementVNode("div", {
-              class: normalizeClass(["text-nowrap rounded-full border px-4 py-1 text-sm font-semibold", stepClasses(step, idx)])
-            }, toDisplayString(stepTitle(step)), 3),
-            idx < _ctx.steps.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createVNode(_sfc_main$1, {
-                icon: "material-symbols:arrow-right-alt-rounded",
-                class: normalizeClass([currentStepIndex.value <= idx ? "text-p-gray-30" : "text-p-blue-50"])
-              }, null, 8, ["class"])
-            ])) : createCommentVNode("", true)
-          ], 64);
-        }), 128))
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/squirrel/components/p-steps/p-steps.spec.js

@@ -1,126 +0,0 @@
-import PSteps from '@squirrel/components/p-steps/p-steps.vue';
-import { createWrapperFor } from '@tests/vitest.helpers';
-
-describe('PSteps.vue', () => {
-  it('renders correctly', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['first', 'second', 'third'],
-        currentStep: 'second',
-        stepTitleMap: {},
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders the correct number of steps', () => {
-    const steps = ['first', 'second', 'third'];
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps,
-        currentStep: 'second',
-        stepTitleMap: {},
-      },
-    });
-
-    const stepElements = wrapper.findAll('.rounded-full.border');
-    expect(stepElements.length).toBe(steps.length);
-  });
-
-  it('applies correct classes for current step', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['first', 'second', 'third'],
-        currentStep: 'second',
-        stepTitleMap: {},
-      },
-    });
-
-    const stepElements = wrapper.findAll('.rounded-full.border');
-
-    // First step should be completed (blue text)
-    expect(stepElements[0].classes()).toContain('text-nowrap');
-    expect(stepElements[0].classes()).toContain('text-p-blue-50');
-    expect(stepElements[0].classes()).toContain('border-p-blue-50');
-
-    // Second step should be current (blue background)
-    expect(stepElements[1].classes()).toContain('text-nowrap');
-    expect(stepElements[1].classes()).toContain('bg-p-blue-50');
-    expect(stepElements[1].classes()).toContain('text-surface');
-    expect(stepElements[1].classes()).toContain('border-p-blue-50');
-
-    // Third step should be upcoming (gray)
-    expect(stepElements[2].classes()).toContain('text-nowrap');
-    expect(stepElements[2].classes()).toContain('text-p-gray-30');
-    expect(stepElements[2].classes()).toContain('border-p-gray-30');
-  });
-
-  it('displays step titles from stepTitleMap when provided', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['step1', 'step2', 'step3'],
-        currentStep: 'step2',
-        stepTitleMap: {
-          step1: 'Custom Step 1',
-          step2: 'Custom Step 2',
-          step3: 'Custom Step 3',
-        },
-      },
-    });
-
-    const stepElements = wrapper.findAll('.rounded-full.border');
-    expect(stepElements[0].text()).toBe('Custom Step 1');
-    expect(stepElements[1].text()).toBe('Custom Step 2');
-    expect(stepElements[2].text()).toBe('Custom Step 3');
-  });
-
-  it('uses startCase for step titles when stepTitleMap entry is not provided', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['firstStep', 'secondStep', 'thirdStep'],
-        currentStep: 'secondStep',
-        stepTitleMap: {
-          secondStep: 'Custom Second',
-        },
-      },
-    });
-
-    const stepElements = wrapper.findAll('.rounded-full.border');
-    expect(stepElements[0].text()).toBe('First Step'); // startCase applied
-    expect(stepElements[1].text()).toBe('Custom Second'); // from map
-    expect(stepElements[2].text()).toBe('Third Step'); // startCase applied
-  });
-
-  it('renders the correct number of arrows between steps', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['first', 'second', 'third', 'fourth'],
-        currentStep: 'second',
-        stepTitleMap: {},
-      },
-    });
-
-    // There should be 3 arrows for 4 steps
-    const arrowElements = wrapper.findAll('[icon="material-symbols:arrow-right-alt-rounded"]');
-    expect(arrowElements.length).toBe(3);
-  });
-
-  it('applies the correct classes to arrows based on current step', () => {
-    const wrapper = createWrapperFor(PSteps, {
-      props: {
-        steps: ['first', 'second', 'third', 'fourth'],
-        currentStep: 'second',
-        stepTitleMap: {},
-      },
-    });
-
-    const arrowElements = wrapper.findAll('[icon="material-symbols:arrow-right-alt-rounded"]');
-
-    // Arrow between first and second step should be colored
-    expect(arrowElements[0].classes()).toContain('text-p-blue-50');
-
-    // Arrow after current step should be gray
-    expect(arrowElements[1].classes()).toContain('text-p-gray-30');
-    expect(arrowElements[2].classes()).toContain('text-p-gray-30');
-  });
-});