@pequity/squirrel 7.2.5 → 8.0.0

package/dist/cjs/chunks/p-input-number.js

@@ -47,6 +47,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     tooltipText: {
       type: String,
       default: ""
+    },
+    prefixString: {
+      type: String,
+      default: ""
     }
   },
   emits: ["update:modelValue", "change"],
@@ -64,13 +68,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       "useGrouping",
       "valueScaling"
     ];
+    const prefixClasses = {
+      sm: "text-sm h-8 left-2",
+      md: "text-base h-10 left-3",
+      lg: "text-lg h-12 left-5"
+    };
     const emit = __emit;
     const props = __props;
     const slots = vue.useSlots();
     const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses.useInputClasses(
       vue.computed(() => ({
         ...props,
-        prefix: !!slots.prefix,
+        prefix: !!slots.prefix || !!props.prefixString,
         suffix: !!slots.suffix
       }))
     );
@@ -137,8 +146,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["text"])) : vue.createCommentVNode("", true)
         ]),
         vue.createElementVNode("div", _hoisted_3, [
-          !!_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-            vue.renderSlot(_ctx.$slots, "prefix")
+          !!_ctx.$slots.prefix || __props.prefixString ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+            vue.renderSlot(_ctx.$slots, "prefix", {}, () => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([{ "absolute left-3 flex items-center": __props.prefixString }, __props.prefixString ? prefixClasses[__props.size] : ""])
+              }, vue.toDisplayString(__props.prefixString), 3)
+            ])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("input", vue.mergeProps({
             ref_key: "inputRef",

package/dist/es/chunks/p-input-number.js

@@ -46,6 +46,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     tooltipText: {
       type: String,
       default: ""
+    },
+    prefixString: {
+      type: String,
+      default: ""
     }
   },
   emits: ["update:modelValue", "change"],
@@ -63,13 +67,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "useGrouping",
       "valueScaling"
     ];
+    const prefixClasses = {
+      sm: "text-sm h-8 left-2",
+      md: "text-base h-10 left-3",
+      lg: "text-lg h-12 left-5"
+    };
     const emit = __emit;
     const props = __props;
     const slots = useSlots();
     const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
       computed(() => ({
         ...props,
-        prefix: !!slots.prefix,
+        prefix: !!slots.prefix || !!props.prefixString,
         suffix: !!slots.suffix
       }))
     );
@@ -136,8 +145,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, ["text"])) : createCommentVNode("", true)
         ]),
         createElementVNode("div", _hoisted_3, [
-          !!_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "prefix")
+          !!_ctx.$slots.prefix || __props.prefixString ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "prefix", {}, () => [
+              createElementVNode("div", {
+                class: normalizeClass([{ "absolute left-3 flex items-center": __props.prefixString }, __props.prefixString ? prefixClasses[__props.size] : ""])
+              }, toDisplayString(__props.prefixString), 3)
+            ])
           ])) : createCommentVNode("", true),
           createElementVNode("input", mergeProps({
             ref_key: "inputRef",

package/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts

@@ -1,6 +1,7 @@
 import { type Size } from '../p-btn/p-btn.types';
 import PInfoIcon from '../p-info-icon/p-info-icon.vue';
 import { type PropType, type StyleValue } from 'vue';
+declare const prefixClasses: Record<Size, string>;
 declare const labelClasses: import("vue").ComputedRef<string>, inputClasses: import("vue").ComputedRef<string>, errorMsgClasses: import("vue").ComputedRef<string>;
 declare const inputRef: import("vue").Ref<any, any>;
 declare const computedAttrs: import("vue").ComputedRef<{
@@ -48,8 +49,13 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    prefixString: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {
     PInfoIcon: typeof PInfoIcon;
+    prefixClasses: typeof prefixClasses;
     labelClasses: typeof labelClasses;
     inputClasses: typeof inputClasses;
     errorMsgClasses: typeof errorMsgClasses;
@@ -90,6 +96,10 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    prefixString: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -101,6 +111,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     errorMsg: string;
     selectOnClick: boolean;
     tooltipText: string;
+    prefixString: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -132,6 +143,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    prefixString: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {
     setValue: (number: number | null) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -167,6 +182,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    prefixString: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -178,6 +197,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     errorMsg: string;
     selectOnClick: boolean;
     tooltipText: string;
+    prefixString: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.2.5",
+  "version": "8.0.0",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -75,7 +75,7 @@
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-plugin-storybook": "^0.12.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
@@ -90,12 +90,12 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.86.2",
+    "sass": "^1.86.3",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.8.2",
+    "typescript": "5.8.3",
     "vite": "^6.2.5",
     "vitest": "^3.1.1",
     "vue": "3.5.13",
@@ -109,7 +109,7 @@
   },
   "pnpm": {
     "overrides": {
-      "typescript": "5.8.2"
+      "typescript": "5.8.3"
     }
   }
 }

package/squirrel/components/p-input-number/p-input-number.spec.js

@@ -1,4 +1,5 @@
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
+import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 const baseClasses = () => [
@@ -139,6 +140,45 @@ describe('PInputNumber.vue', () => {
     expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
   });
 
+  it('renders the prefixString prop content when no slot is provided', () => {
+    const wrapper = createWrapperFor(PInputNumber, {
+      props: {
+        prefixString: '$',
+        label: 'test input',
+      },
+    });
+
+    const prefixDiv = wrapper.find('div > div.relative > div');
+    expect(prefixDiv.exists()).toBe(true);
+    expect(prefixDiv.text()).toBe('$');
+  });
+
+  it('works correctly when the component is stubbed', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const wrapper = createWrapperFor(
+      {
+        template: `<PInputNumber v-model="numberVal" />`,
+        components: { PInputNumber },
+        data() {
+          return {
+            numberVal: null,
+          };
+        },
+      },
+      {
+        global: {
+          stubs: {
+            PInputNumber: true,
+          },
+        },
+      }
+    );
+
+    expect(wrapper.findComponent({ name: 'PInputNumber' }).exists()).toBe(true);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
   it('emits a number on input', async () => {
     const wrapper = createWrapperFor({
       template: `<PInputNumber v-model="numberVal" />`,

package/squirrel/components/p-input-number/p-input-number.stories.js

@@ -87,3 +87,33 @@ export const Currency = {
     modelValue: 2000,
   },
 };
+
+export const WithPrefix = {
+  render: (args) => ({
+    components: { PInputNumber },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="space-y-4">
+        <PInputNumber v-bind="args" prefix="$" label="Using prefix prop" />
+        <PInputNumber v-bind="args" label="Using prefix slot">
+          <template #prefix>
+            <span class="text-primary font-semibold">$</span>
+          </template>
+        </PInputNumber>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: 1234,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The prefix can be added either using the `prefix` prop for simple text, or using the prefix slot for more complex content.',
+      },
+    },
+  },
+};

package/squirrel/components/p-input-number/p-input-number.vue

@@ -9,8 +9,14 @@
       <PInfoIcon v-if="tooltipText" :text="tooltipText" class="ml-1" />
     </div>
     <div class="relative w-full">
-      <div v-if="!!$slots.prefix">
-        <slot name="prefix"></slot>
+      <div v-if="!!$slots.prefix || prefixString">
+        <slot name="prefix">
+          <div
+            :class="[{ 'absolute left-3 flex items-center': prefixString }, prefixString ? prefixClasses[size] : '']"
+          >
+            {{ prefixString }}
+          </div>
+        </slot>
       </div>
       <input ref="inputRef" type="text" v-bind="computedAttrs" :class="inputClasses" @focus="focus" />
     </div>
@@ -41,6 +47,12 @@ const ALL_OPTIONS = [
   'valueScaling',
 ];
 
+const prefixClasses: Record<Size, string> = {
+  sm: 'text-sm h-8 left-2',
+  md: 'text-base h-10 left-3',
+  lg: 'text-lg h-12 left-5',
+};
+
 defineOptions({
   name: 'PInputNumber',
   inheritAttrs: false,
@@ -80,6 +92,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  prefixString: {
+    type: String,
+    default: '',
+  },
 });
 
 const slots = useSlots();
@@ -87,7 +103,7 @@ const slots = useSlots();
 const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
   computed(() => ({
     ...props,
-    prefix: !!slots.prefix,
+    prefix: !!slots.prefix || !!props.prefixString,
     suffix: !!slots.suffix,
   }))
 );