@pequity/squirrel 7.2.5 → 7.2.6

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

@@ -47,6 +47,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     tooltipText: {
       type: String,
       default: ""
+    },
+    prefix: {
+      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.prefix,
         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.prefix ? (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.prefix }, __props.prefix ? prefixClasses[__props.size] : ""])
+              }, vue.toDisplayString(__props.prefix), 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: ""
+    },
+    prefix: {
+      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.prefix,
         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.prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "prefix", {}, () => [
+              createElementVNode("div", {
+                class: normalizeClass([{ "absolute left-3 flex items-center": __props.prefix }, __props.prefix ? prefixClasses[__props.size] : ""])
+              }, toDisplayString(__props.prefix), 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;
     };
+    prefix: {
+        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;
     };
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -98,6 +108,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     label: string;
     required: boolean;
     modelValue: string | number | null | undefined;
+    prefix: string;
     errorMsg: string;
     selectOnClick: boolean;
     tooltipText: string;
@@ -132,6 +143,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    prefix: {
+        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;
     };
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -175,6 +194,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     label: string;
     required: boolean;
     modelValue: string | number | null | undefined;
+    prefix: string;
     errorMsg: string;
     selectOnClick: boolean;
     tooltipText: string;

package/package.json

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

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

@@ -139,6 +139,19 @@ describe('PInputNumber.vue', () => {
     expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
   });
 
+  it('renders the prefix prop content when no slot is provided', () => {
+    const wrapper = createWrapperFor(PInputNumber, {
+      props: {
+        prefix: '$',
+        label: 'test input',
+      },
+    });
+
+    const prefixDiv = wrapper.find('div > div.relative > div');
+    expect(prefixDiv.exists()).toBe(true);
+    expect(prefixDiv.text()).toBe('$');
+  });
+
   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,12 @@
       <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 || prefix">
+        <slot name="prefix">
+          <div :class="[{ 'absolute left-3 flex items-center': prefix }, prefix ? prefixClasses[size] : '']">
+            {{ prefix }}
+          </div>
+        </slot>
       </div>
       <input ref="inputRef" type="text" v-bind="computedAttrs" :class="inputClasses" @focus="focus" />
     </div>
@@ -41,6 +45,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 +90,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  prefix: {
+    type: String,
+    default: '',
+  },
 });
 
 const slots = useSlots();
@@ -87,7 +101,7 @@ const slots = useSlots();
 const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
   computed(() => ({
     ...props,
-    prefix: !!slots.prefix,
+    prefix: !!slots.prefix || !!props.prefix,
     suffix: !!slots.suffix,
   }))
 );