@pequity/squirrel 8.3.0 → 8.3.2

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

@@ -1,13 +1,13 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelect from '@squirrel/components/p-select/p-select.vue';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel' },
   { value: 2, text: 'Van Deyes' },
   { value: 3, text: 'Meris Hardman and a very long text here' },
   { value: 4, text: 'Chick Catto' },
   { value: 5, text: "Alys O'Flynn" },
-]);
+];
 
 export default {
   title: 'Components/PSelect',

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,14 +1,15 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
 import { expect, userEvent, within } from '@storybook/test';
+import { ref } from 'vue';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },
   { value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' },
   { value: 3, text: 'Meris Hardman', tooltip: 'lorem ipsum text 3' },
   { value: 4, text: 'Chick Catto', tooltip: 'lorem ipsum text 4' },
   { value: 5, text: "Alys O'Flynn", tooltip: 'lorem ipsum text 5' },
-]);
+];
 
 export default {
   title: 'Components/PSelectBtn',
@@ -17,7 +18,9 @@ export default {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -27,11 +30,6 @@ export default {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     size: fieldArgTypes.size,
@@ -86,7 +84,9 @@ export const Sizes = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -101,11 +101,6 @@ export const Sizes = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -135,7 +130,9 @@ export const WithTooltip = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -144,11 +141,6 @@ export const WithTooltip = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -218,7 +210,9 @@ export const MultipleSelected = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref([{ value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' }]);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -228,11 +222,6 @@ export const MultipleSelected = {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: [{ value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' }],
-      };
-    },
   }),
   args: {
     items: selectItems,

package/squirrel/components/p-select-pill/p-select-pill.stories.js

@@ -2,16 +2,17 @@ import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
 import { expect, userEvent, within } from '@storybook/test';
+import { ref } from 'vue';
 
 const ACTIVE_CLASS = 'text-p-purple-60';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel' },
   { value: 2, text: 'Van Deyes' },
   { value: 3, text: 'Meris Hardman' },
   { value: 4, text: 'Chick Catto' },
   { value: 5, text: "Alys O'Flynn" },
-]);
+];
 
 const selectItemsSubtext = selectItems.map((item, i) => ({ ...item, subtext: `text${i + 1}` }));
 
@@ -22,7 +23,9 @@ export default {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -32,11 +35,6 @@ export default {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     size: fieldArgTypes.size,
@@ -98,7 +96,9 @@ export const Sizes = {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -113,11 +113,6 @@ export const Sizes = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -147,7 +142,9 @@ export const Subtext = {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -156,11 +153,6 @@ export const Subtext = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {

package/squirrel/components/p-steps/__snapshots__/{p-steps.spec.js.snap → p-steps.spec.ts.snap}

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

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

@@ -0,0 +1,203 @@
+import PSteps from '@squirrel/components/p-steps/p-steps.vue';
+import { createWrapperFor } from '@tests/vitest.helpers';
+import { type VueWrapper } from '@vue/test-utils';
+
+const createSteps = () => [
+  { value: 'first', text: 'First' },
+  { value: 'second', text: 'Second' },
+  { value: 'third', text: 'Third' },
+];
+
+const createWrapper = (props = {}) => {
+  return createWrapperFor(PSteps, {
+    props: {
+      steps: createSteps(),
+      activeStep: null,
+      clickable: false,
+      ...props,
+    },
+  });
+};
+
+describe('PSteps.vue', () => {
+  describe('render tests', () => {
+    it('renders correctly', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it('renders the correct number of steps', () => {
+      const wrapper = createWrapper({
+        steps: createSteps(),
+        activeStep: 'second',
+      });
+
+      const stepElements = wrapper.findAll('.rounded-full.border');
+      expect(stepElements.length).toBe(createSteps().length);
+    });
+
+    it('applies correct classes for current step', () => {
+      const wrapper = createWrapper({
+        activeStep: 'second',
+      });
+
+      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', () => {
+      const wrapper = createWrapper({
+        steps: [
+          { value: 'step1', text: 'Custom Step 1' },
+          { value: 'step2', text: 'Custom Step 2' },
+          { value: 'step3', text: 'Custom Step 3' },
+        ],
+        activeStep: 'step2',
+      });
+
+      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('displays step titles in startCase when the text is missing', () => {
+      const wrapper = createWrapper({
+        steps: [{ value: 'customStep1' }, { value: 'customStep2' }, { value: 'customStep3' }],
+        activeStep: 'customStep2',
+      });
+
+      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('renders the correct number of arrows between steps', () => {
+      const wrapper = createWrapper({
+        steps: [
+          { value: 1, text: '1' },
+          { value: 2, text: '2' },
+          { value: 3, text: '3' },
+          { value: 4, text: '4' },
+        ],
+        activeStep: 'second',
+      });
+
+      // 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 = createWrapper({
+        steps: [
+          { value: 1, text: '1' },
+          { value: 2, text: '2' },
+          { value: 3, text: '3' },
+          { value: 4, text: '4' },
+        ],
+        activeStep: 2,
+      });
+
+      const arrowElements = wrapper.findAll('[icon="material-symbols:arrow-right-alt-rounded"]');
+
+      expect(arrowElements.length).toBe(3);
+
+      // 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');
+    });
+
+    it('sets cursor-pointer when clickable is true', async () => {
+      const wrapper = createWrapper({ activeStep: 'first', clickable: true });
+
+      const stepElements = wrapper.findAll('.rounded-full.border');
+
+      stepElements.forEach((stepElement: VueWrapper) => {
+        expect(stepElement.classes()).toContain('cursor-pointer');
+      });
+    });
+
+    it('sets cursor-pointer clickable steps only', async () => {
+      const wrapper = createWrapper({
+        steps: [
+          { value: 1, text: '1', disabled: false },
+          { value: 2, text: '2', disabled: true },
+          { value: 3, text: '3', disabled: false },
+        ],
+        activeStep: 1,
+        clickable: true,
+      });
+      const stepElements = wrapper.findAll('.rounded-full.border');
+
+      // First step should be clickable
+      expect(stepElements[0].classes()).toContain('cursor-pointer');
+
+      // Second step should not be clickable
+      expect(stepElements[1].classes()).not.toContain('cursor-pointer');
+
+      // Third step should be clickable
+      expect(stepElements[2].classes()).toContain('cursor-pointer');
+    });
+
+    it('does not set cursor-pointer when item disabled is true', async () => {
+      const wrapper = createWrapper({
+        steps: [
+          { value: 1, text: '1', disabled: true },
+          { value: 2, text: '2', disabled: true },
+        ],
+        activeStep: 1,
+        clickable: true,
+      });
+
+      const stepElements = wrapper.findAll('.rounded-full.border');
+
+      stepElements.forEach((stepElement: VueWrapper) => {
+        expect(stepElement.classes()).not.toContain('cursor-pointer');
+      });
+    });
+
+    it('emits click:step when a step is clicked', async () => {
+      const wrapper = createWrapper({ activeStep: 'first', clickable: true });
+
+      const stepElements = wrapper.findAll('.rounded-full.border');
+
+      await stepElements[1].trigger('click');
+
+      expect(wrapper.emitted()['click:step'][0]).toEqual([{ text: 'Second', value: 'second' }, 1]);
+    });
+
+    it('updates the active step when activeStep changes', async () => {
+      const wrapper = createWrapper({ activeStep: 'first' });
+
+      const getStepElements = () => wrapper.findAll('.rounded-full.border');
+
+      expect(getStepElements()[0].classes()).toContain('bg-p-blue-50');
+
+      await wrapper.setProps({ activeStep: 'second' });
+
+      expect(getStepElements()[1].classes()).toContain('bg-p-blue-50');
+    });
+  });
+});

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

@@ -1,4 +1,5 @@
 import PSteps from '@squirrel/components/p-steps/p-steps.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PSteps',
@@ -22,10 +23,37 @@ export const Default = {
     template: `<PSteps v-bind="args" />`,
   }),
   args: {
-    steps: ['stepOne', 'stepTwo', 'stepThree', 'stepFour'],
-    currentStep: 'stepTwo',
-    stepTitleMap: {
-      stepTwo: 'Criteria',
+    steps: [
+      { value: 'stepOne', text: 'Step One' },
+      { value: 'stepTwo', text: 'Step Two' },
+      { value: 'stepThree', text: 'Step Three' },
+      { value: 'stepFour', text: 'Step Four' },
+    ],
+    activeStep: 'stepTwo',
+  },
+};
+
+export const Clickable = {
+  render: (args) => ({
+    components: { PSteps },
+    setup() {
+      const activeStep = ref('stepTwo');
+
+      const setActiveStep = (step) => {
+        activeStep.value = String(step.value);
+      };
+
+      return { args, activeStep, setActiveStep };
     },
+    template: `<PSteps v-bind="args" :active-step="activeStep" @click:step="setActiveStep" />`,
+  }),
+  args: {
+    steps: [
+      { value: 'stepOne', text: 'Step One' },
+      { value: 'stepTwo', text: 'Step Two' },
+      { value: 'stepThree', text: 'Step Three' },
+      { value: 'stepFour', text: 'Step Four' },
+    ],
+    clickable: true,
   },
 };

package/squirrel/components/p-steps/p-steps.types.ts

@@ -0,0 +1,5 @@
+export type StepItem = {
+  value: string | number | null;
+  text?: string;
+  disabled?: boolean;
+};

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/squirrel/components/p-table-sort/p-table-sort.stories.js

@@ -1,5 +1,6 @@
 import { SORTING_TYPES } from '@squirrel/components/p-table-sort/p-table-sort.config';
 import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PTableSort',
@@ -37,17 +38,14 @@ export const WithVModel = {
   render: (args) => ({
     components: { PTableSort },
     setup() {
-      return { args };
+      const selected = ref(SORTING_TYPES.NO_SORTING);
+
+      return { args, selected };
     },
     template: `
       <div>
         <PTableSort v-model="selected" v-bind="args" />
         <div class="mt-2">Selected: {{ selected }}</div>
       </div>`,
-    data() {
-      return {
-        selected: SORTING_TYPES.NO_SORTING,
-      };
-    },
   }),
 };

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;