@pequity/squirrel 8.3.0 → 8.3.2

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');
-  });
-});