@pequity/squirrel 8.0.2 → 8.1.0

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

@@ -0,0 +1,52 @@
+"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: "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/cjs/index.js

@@ -42,6 +42,7 @@ const string = require("./string.js");
 const text = require("./text.js");
 const pSelectPill = require("./p-select-pill.js");
 const pSkeletonLoader = require("./p-skeleton-loader.js");
+const pSteps_vue_vue_type_script_setup_true_lang = require("./chunks/p-steps.js");
 const pTable$1 = require("./p-table.js");
 const usePTableColResize = require("./usePTableColResize.js");
 const pTableHeaderCell = require("./p-table-header-cell.js");
@@ -1019,6 +1020,7 @@ exports.toString = string.toString;
 exports.splitStringForHighlight = text.splitStringForHighlight;
 exports.PSelectPill = pSelectPill;
 exports.PSkeletonLoader = pSkeletonLoader;
+exports.PSteps = pSteps_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.MIN_WIDTH_COL_RESIZE = pTable$1.MIN_WIDTH_COL_RESIZE;
 exports.colsInjectionKey = pTable$1.colsInjectionKey;
 exports.isColsResizableInjectionKey = pTable$1.isColsResizableInjectionKey;

package/dist/cjs/p-steps.js

@@ -0,0 +1,3 @@
+"use strict";
+const pSteps_vue_vue_type_script_setup_true_lang = require("./chunks/p-steps.js");
+module.exports = pSteps_vue_vue_type_script_setup_true_lang._sfc_main;

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

@@ -0,0 +1,53 @@
+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: "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/dist/es/index.js

@@ -41,6 +41,7 @@ import { toString } from "./string.js";
 import { splitStringForHighlight } from "./text.js";
 import { default as default9 } from "./p-select-pill.js";
 import { default as default10 } from "./p-skeleton-loader.js";
+import { _ as _19 } from "./chunks/p-steps.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
@@ -49,10 +50,10 @@ import PTableTd from "./p-table-td.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
 import { default as default11 } from "./p-table-filter-icon.js";
-import { _ as _19 } from "./chunks/p-table-loader.js";
+import { _ as _20 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
-import { _ as _20 } from "./chunks/p-tabs.js";
-import { _ as _21 } from "./chunks/p-textarea.js";
+import { _ as _21 } from "./chunks/p-tabs.js";
+import { _ as _22 } from "./chunks/p-textarea.js";
 import { default as default12 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
 import { S } from "./chunks/p-btn.types.js";
@@ -1018,13 +1019,14 @@ export {
   _sfc_main$2 as PSelectList,
   default9 as PSelectPill,
   default10 as PSkeletonLoader,
+  _19 as PSteps,
   pTable as PTable,
   PTableHeaderCell,
-  _19 as PTableLoader,
+  _20 as PTableLoader,
   _sfc_main as PTableSort,
   PTableTd,
-  _20 as PTabs,
-  _21 as PTextarea,
+  _21 as PTabs,
+  _22 as PTextarea,
   default12 as PToggle,
   P_ICON_ALIASES,
   S as SIZES,

package/dist/es/p-steps.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/p-steps.js";
+export {
+  _sfc_main as default
+};

package/dist/squirrel/components/index.d.ts

@@ -37,6 +37,7 @@ import PSelectList from './p-select-list/p-select-list.vue';
 import { useSelectList } from './p-select-list/useSelectList';
 import PSelectPill from './p-select-pill/p-select-pill.vue';
 import PSkeletonLoader from './p-skeleton-loader/p-skeleton-loader.vue';
+import PSteps from './p-steps/p-steps.vue';
 import { colsInjectionKey, type HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, type TableCol, type ThAttrs } from './p-table/p-table.types';
 import PTable from './p-table/p-table.vue';
 import { usePTableColResize } from './p-table/usePTableColResize';
@@ -50,4 +51,4 @@ import PTableTd from './p-table-td/p-table-td.vue';
 import PTabs from './p-tabs/p-tabs.vue';
 import PTextarea from './p-textarea/p-textarea.vue';
 import PToggle from './p-toggle/p-toggle.vue';
-export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };
+export { colsInjectionKey, FileUploadFile, HeaderCellAttrs, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PIconAlias, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PSteps, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, Size, SORTING_TYPES, SortingType, SortingTypeWithoutNoSorting, TableCol, ThAttrs, usePLoading, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, };

package/dist/squirrel/components/p-steps/p-steps.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: <T extends readonly string[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+        steps: T;
+        currentStep: T[number];
+        stepTitleMap?: Partial<Record<T[number], string>>;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {

package/squirrel/components/index.ts

@@ -37,6 +37,7 @@ import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
 import { useSelectList } from '@squirrel/components/p-select-list/useSelectList';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
 import {
   colsInjectionKey,
   type HeaderCellAttrs,
@@ -108,6 +109,7 @@ export {
   PSelectList,
   PSelectPill,
   PSkeletonLoader,
+  PSteps,
   PTable,
   PTableHeaderCell,
   PTableLoader,

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

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PSteps.vue > renders correctly 1`] = `
+"<div class="flex items-center gap-2">
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-blue-50 text-p-blue-50">First</div>
+  <div class="flex items-center">
+    <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-blue-50"></iconify-icon>
+  </div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-blue-50 bg-p-blue-50 text-surface">Second</div>
+  <div class="flex items-center">
+    <iconify-icon icon="material-symbols:arrow-right-alt-rounded" class="text-p-gray-30"></iconify-icon>
+  </div>
+  <div class="text-nowrap rounded-full border px-4 py-1 text-sm font-semibold border border-p-gray-30 text-p-gray-30">Third</div>
+  <!--v-if-->
+</div>"
+`;

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

@@ -0,0 +1,126 @@
+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');
+  });
+});

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

@@ -0,0 +1,31 @@
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
+
+export default {
+  title: 'Components/PSteps',
+  component: PSteps,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Steps Component to be used in wizards',
+      },
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { PSteps },
+    setup() {
+      return { args };
+    },
+    template: `<PSteps v-bind="args" />`,
+  }),
+  args: {
+    steps: ['stepOne', 'stepTwo', 'stepThree', 'stepFour'],
+    currentStep: 'stepTwo',
+    stepTitleMap: {
+      stepTwo: 'Criteria',
+    },
+  },
+};

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>