@pequity/squirrel 7.2.4 → 7.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/chunks/p-action-bar.js +12 -5
- package/dist/cjs/chunks/p-input-number.js +16 -3
- package/dist/es/chunks/p-action-bar.js +12 -5
- package/dist/es/chunks/p-input-number.js +16 -3
- package/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts +20 -0
- package/package.json +16 -16
- package/squirrel/components/p-action-bar/p-action-bar.spec.ts +1 -0
- package/squirrel/components/p-action-bar/p-action-bar.vue +7 -3
- package/squirrel/components/p-input-number/p-input-number.spec.js +13 -0
- package/squirrel/components/p-input-number/p-input-number.stories.js +30 -0
- package/squirrel/components/p-input-number/p-input-number.vue +17 -3
|
@@ -7,7 +7,7 @@ const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
|
|
|
7
7
|
const component = require("../component.js");
|
|
8
8
|
const string = require("../string.js");
|
|
9
9
|
const _hoisted_1 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
|
|
10
|
-
const _hoisted_2 = { class: "whitespace-nowrap
|
|
10
|
+
const _hoisted_2 = { class: "mx-4 whitespace-nowrap" };
|
|
11
11
|
const _hoisted_3 = { class: "flex" };
|
|
12
12
|
const _hoisted_4 = { class: "flex items-center gap-2 px-1 py-0.5" };
|
|
13
13
|
const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
|
|
@@ -34,12 +34,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
34
34
|
role: "alertdialog"
|
|
35
35
|
}, _ctx.$attrs), [
|
|
36
36
|
vue.createElementVNode("div", _hoisted_1, [
|
|
37
|
-
vue.
|
|
38
|
-
|
|
37
|
+
vue.createElementVNode("div", {
|
|
38
|
+
class: "mr-4 flex cursor-pointer items-center",
|
|
39
39
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
|
|
40
|
-
}
|
|
40
|
+
}, [
|
|
41
|
+
vue.createVNode(pCloseBtn, {
|
|
42
|
+
variant: "dark",
|
|
43
|
+
class: "-mr-1"
|
|
44
|
+
}),
|
|
45
|
+
_cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "text-xs" }, "Clear All", -1))
|
|
46
|
+
]),
|
|
47
|
+
_cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
|
|
41
48
|
vue.createElementVNode("p", _hoisted_2, vue.toDisplayString(_ctx.label), 1),
|
|
42
|
-
_cache[
|
|
49
|
+
_cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "mr-2 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
|
|
43
50
|
vue.createElementVNode("div", _hoisted_3, [
|
|
44
51
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (actionOrMenu) => {
|
|
45
52
|
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
|
|
@@ -47,6 +47,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
47
47
|
tooltipText: {
|
|
48
48
|
type: String,
|
|
49
49
|
default: ""
|
|
50
|
+
},
|
|
51
|
+
prefix: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: ""
|
|
50
54
|
}
|
|
51
55
|
},
|
|
52
56
|
emits: ["update:modelValue", "change"],
|
|
@@ -64,13 +68,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
64
68
|
"useGrouping",
|
|
65
69
|
"valueScaling"
|
|
66
70
|
];
|
|
71
|
+
const prefixClasses = {
|
|
72
|
+
sm: "text-sm h-8 left-2",
|
|
73
|
+
md: "text-base h-10 left-3",
|
|
74
|
+
lg: "text-lg h-12 left-5"
|
|
75
|
+
};
|
|
67
76
|
const emit = __emit;
|
|
68
77
|
const props = __props;
|
|
69
78
|
const slots = vue.useSlots();
|
|
70
79
|
const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses.useInputClasses(
|
|
71
80
|
vue.computed(() => ({
|
|
72
81
|
...props,
|
|
73
|
-
prefix: !!slots.prefix,
|
|
82
|
+
prefix: !!slots.prefix || !!props.prefix,
|
|
74
83
|
suffix: !!slots.suffix
|
|
75
84
|
}))
|
|
76
85
|
);
|
|
@@ -137,8 +146,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
137
146
|
}, null, 8, ["text"])) : vue.createCommentVNode("", true)
|
|
138
147
|
]),
|
|
139
148
|
vue.createElementVNode("div", _hoisted_3, [
|
|
140
|
-
!!_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
|
|
141
|
-
vue.renderSlot(_ctx.$slots, "prefix")
|
|
149
|
+
!!_ctx.$slots.prefix || __props.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
|
|
150
|
+
vue.renderSlot(_ctx.$slots, "prefix", {}, () => [
|
|
151
|
+
vue.createElementVNode("div", {
|
|
152
|
+
class: vue.normalizeClass([{ "absolute left-3 flex items-center": __props.prefix }, __props.prefix ? prefixClasses[__props.size] : ""])
|
|
153
|
+
}, vue.toDisplayString(__props.prefix), 3)
|
|
154
|
+
])
|
|
142
155
|
])) : vue.createCommentVNode("", true),
|
|
143
156
|
vue.createElementVNode("input", vue.mergeProps({
|
|
144
157
|
ref_key: "inputRef",
|
|
@@ -6,7 +6,7 @@ import { _ as _sfc_main$2 } from "./p-icon.js";
|
|
|
6
6
|
import { isComponent } from "../component.js";
|
|
7
7
|
import { isString } from "../string.js";
|
|
8
8
|
const _hoisted_1 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
|
|
9
|
-
const _hoisted_2 = { class: "whitespace-nowrap
|
|
9
|
+
const _hoisted_2 = { class: "mx-4 whitespace-nowrap" };
|
|
10
10
|
const _hoisted_3 = { class: "flex" };
|
|
11
11
|
const _hoisted_4 = { class: "flex items-center gap-2 px-1 py-0.5" };
|
|
12
12
|
const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
|
|
@@ -33,12 +33,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
33
|
role: "alertdialog"
|
|
34
34
|
}, _ctx.$attrs), [
|
|
35
35
|
createElementVNode("div", _hoisted_1, [
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
createElementVNode("div", {
|
|
37
|
+
class: "mr-4 flex cursor-pointer items-center",
|
|
38
38
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
|
|
39
|
-
}
|
|
39
|
+
}, [
|
|
40
|
+
createVNode(PCloseBtn, {
|
|
41
|
+
variant: "dark",
|
|
42
|
+
class: "-mr-1"
|
|
43
|
+
}),
|
|
44
|
+
_cache[1] || (_cache[1] = createElementVNode("div", { class: "text-xs" }, "Clear All", -1))
|
|
45
|
+
]),
|
|
46
|
+
_cache[2] || (_cache[2] = createElementVNode("div", { class: "h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
|
|
40
47
|
createElementVNode("p", _hoisted_2, toDisplayString(_ctx.label), 1),
|
|
41
|
-
_cache[
|
|
48
|
+
_cache[3] || (_cache[3] = createElementVNode("div", { class: "mr-2 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1)),
|
|
42
49
|
createElementVNode("div", _hoisted_3, [
|
|
43
50
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (actionOrMenu) => {
|
|
44
51
|
return openBlock(), createElementBlock(Fragment, {
|
|
@@ -46,6 +46,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
46
46
|
tooltipText: {
|
|
47
47
|
type: String,
|
|
48
48
|
default: ""
|
|
49
|
+
},
|
|
50
|
+
prefix: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: ""
|
|
49
53
|
}
|
|
50
54
|
},
|
|
51
55
|
emits: ["update:modelValue", "change"],
|
|
@@ -63,13 +67,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
63
67
|
"useGrouping",
|
|
64
68
|
"valueScaling"
|
|
65
69
|
];
|
|
70
|
+
const prefixClasses = {
|
|
71
|
+
sm: "text-sm h-8 left-2",
|
|
72
|
+
md: "text-base h-10 left-3",
|
|
73
|
+
lg: "text-lg h-12 left-5"
|
|
74
|
+
};
|
|
66
75
|
const emit = __emit;
|
|
67
76
|
const props = __props;
|
|
68
77
|
const slots = useSlots();
|
|
69
78
|
const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
|
|
70
79
|
computed(() => ({
|
|
71
80
|
...props,
|
|
72
|
-
prefix: !!slots.prefix,
|
|
81
|
+
prefix: !!slots.prefix || !!props.prefix,
|
|
73
82
|
suffix: !!slots.suffix
|
|
74
83
|
}))
|
|
75
84
|
);
|
|
@@ -136,8 +145,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
136
145
|
}, null, 8, ["text"])) : createCommentVNode("", true)
|
|
137
146
|
]),
|
|
138
147
|
createElementVNode("div", _hoisted_3, [
|
|
139
|
-
!!_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
140
|
-
renderSlot(_ctx.$slots, "prefix")
|
|
148
|
+
!!_ctx.$slots.prefix || __props.prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
149
|
+
renderSlot(_ctx.$slots, "prefix", {}, () => [
|
|
150
|
+
createElementVNode("div", {
|
|
151
|
+
class: normalizeClass([{ "absolute left-3 flex items-center": __props.prefix }, __props.prefix ? prefixClasses[__props.size] : ""])
|
|
152
|
+
}, toDisplayString(__props.prefix), 3)
|
|
153
|
+
])
|
|
141
154
|
])) : createCommentVNode("", true),
|
|
142
155
|
createElementVNode("input", mergeProps({
|
|
143
156
|
ref_key: "inputRef",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type Size } from '../p-btn/p-btn.types';
|
|
2
2
|
import PInfoIcon from '../p-info-icon/p-info-icon.vue';
|
|
3
3
|
import { type PropType, type StyleValue } from 'vue';
|
|
4
|
+
declare const prefixClasses: Record<Size, string>;
|
|
4
5
|
declare const labelClasses: import("vue").ComputedRef<string>, inputClasses: import("vue").ComputedRef<string>, errorMsgClasses: import("vue").ComputedRef<string>;
|
|
5
6
|
declare const inputRef: import("vue").Ref<any, any>;
|
|
6
7
|
declare const computedAttrs: import("vue").ComputedRef<{
|
|
@@ -48,8 +49,13 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
48
49
|
type: StringConstructor;
|
|
49
50
|
default: string;
|
|
50
51
|
};
|
|
52
|
+
prefix: {
|
|
53
|
+
type: StringConstructor;
|
|
54
|
+
default: string;
|
|
55
|
+
};
|
|
51
56
|
}>, {
|
|
52
57
|
PInfoIcon: typeof PInfoIcon;
|
|
58
|
+
prefixClasses: typeof prefixClasses;
|
|
53
59
|
labelClasses: typeof labelClasses;
|
|
54
60
|
inputClasses: typeof inputClasses;
|
|
55
61
|
errorMsgClasses: typeof errorMsgClasses;
|
|
@@ -90,6 +96,10 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
90
96
|
type: StringConstructor;
|
|
91
97
|
default: string;
|
|
92
98
|
};
|
|
99
|
+
prefix: {
|
|
100
|
+
type: StringConstructor;
|
|
101
|
+
default: string;
|
|
102
|
+
};
|
|
93
103
|
}>> & Readonly<{
|
|
94
104
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
95
105
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
@@ -98,6 +108,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
98
108
|
label: string;
|
|
99
109
|
required: boolean;
|
|
100
110
|
modelValue: string | number | null | undefined;
|
|
111
|
+
prefix: string;
|
|
101
112
|
errorMsg: string;
|
|
102
113
|
selectOnClick: boolean;
|
|
103
114
|
tooltipText: string;
|
|
@@ -132,6 +143,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
132
143
|
type: StringConstructor;
|
|
133
144
|
default: string;
|
|
134
145
|
};
|
|
146
|
+
prefix: {
|
|
147
|
+
type: StringConstructor;
|
|
148
|
+
default: string;
|
|
149
|
+
};
|
|
135
150
|
}>, {
|
|
136
151
|
setValue: (number: number | null) => void;
|
|
137
152
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
@@ -167,6 +182,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
167
182
|
type: StringConstructor;
|
|
168
183
|
default: string;
|
|
169
184
|
};
|
|
185
|
+
prefix: {
|
|
186
|
+
type: StringConstructor;
|
|
187
|
+
default: string;
|
|
188
|
+
};
|
|
170
189
|
}>> & Readonly<{
|
|
171
190
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
172
191
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
@@ -175,6 +194,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
|
|
|
175
194
|
label: string;
|
|
176
195
|
required: boolean;
|
|
177
196
|
modelValue: string | number | null | undefined;
|
|
197
|
+
prefix: string;
|
|
178
198
|
errorMsg: string;
|
|
179
199
|
selectOnClick: boolean;
|
|
180
200
|
tooltipText: string;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pequity/squirrel",
|
|
3
3
|
"description": "Squirrel component library",
|
|
4
|
-
"version": "7.2.
|
|
4
|
+
"version": "7.2.6",
|
|
5
5
|
"packageManager": "pnpm@10.6.4",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
@@ -53,22 +53,22 @@
|
|
|
53
53
|
"@playwright/test": "^1.51.1",
|
|
54
54
|
"@semantic-release/changelog": "^6.0.3",
|
|
55
55
|
"@semantic-release/git": "^10.0.1",
|
|
56
|
-
"@storybook/addon-a11y": "^8.6.
|
|
57
|
-
"@storybook/addon-actions": "^8.6.
|
|
58
|
-
"@storybook/addon-essentials": "^8.6.
|
|
59
|
-
"@storybook/addon-interactions": "^8.6.
|
|
60
|
-
"@storybook/addon-links": "^8.6.
|
|
61
|
-
"@storybook/blocks": "^8.6.
|
|
62
|
-
"@storybook/manager-api": "^8.6.
|
|
63
|
-
"@storybook/test": "^8.6.
|
|
56
|
+
"@storybook/addon-a11y": "^8.6.12",
|
|
57
|
+
"@storybook/addon-actions": "^8.6.12",
|
|
58
|
+
"@storybook/addon-essentials": "^8.6.12",
|
|
59
|
+
"@storybook/addon-interactions": "^8.6.12",
|
|
60
|
+
"@storybook/addon-links": "^8.6.12",
|
|
61
|
+
"@storybook/blocks": "^8.6.12",
|
|
62
|
+
"@storybook/manager-api": "^8.6.12",
|
|
63
|
+
"@storybook/test": "^8.6.12",
|
|
64
64
|
"@storybook/test-runner": "^0.22.0",
|
|
65
|
-
"@storybook/theming": "^8.6.
|
|
66
|
-
"@storybook/vue3": "^8.6.
|
|
67
|
-
"@storybook/vue3-vite": "^8.6.
|
|
65
|
+
"@storybook/theming": "^8.6.12",
|
|
66
|
+
"@storybook/vue3": "^8.6.12",
|
|
67
|
+
"@storybook/vue3-vite": "^8.6.12",
|
|
68
68
|
"@tanstack/vue-virtual": "3.13.6",
|
|
69
69
|
"@types/jsdom": "^21.1.7",
|
|
70
70
|
"@types/lodash-es": "^4.17.12",
|
|
71
|
-
"@types/node": "^22.
|
|
71
|
+
"@types/node": "^22.14.0",
|
|
72
72
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
73
73
|
"@vitest/coverage-v8": "^3.1.1",
|
|
74
74
|
"@vue/compiler-sfc": "3.5.13",
|
|
@@ -90,13 +90,13 @@
|
|
|
90
90
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
91
91
|
"resolve-tspaths": "^0.8.23",
|
|
92
92
|
"rimraf": "^6.0.1",
|
|
93
|
-
"sass": "^1.86.
|
|
93
|
+
"sass": "^1.86.2",
|
|
94
94
|
"semantic-release": "^24.2.3",
|
|
95
|
-
"storybook": "^8.6.
|
|
95
|
+
"storybook": "^8.6.12",
|
|
96
96
|
"svgo": "^3.3.2",
|
|
97
97
|
"tailwindcss": "^3.4.17",
|
|
98
98
|
"typescript": "5.8.2",
|
|
99
|
-
"vite": "^6.2.
|
|
99
|
+
"vite": "^6.2.5",
|
|
100
100
|
"vitest": "^3.1.1",
|
|
101
101
|
"vue": "3.5.13",
|
|
102
102
|
"vue-currency-input": "3.2.1",
|
|
@@ -102,6 +102,7 @@ describe('PActionBar.vue', () => {
|
|
|
102
102
|
|
|
103
103
|
const dismissIcon = await wrapper.find('i.x-white-icon');
|
|
104
104
|
expect(dismissIcon.exists()).toBe(true);
|
|
105
|
+
expect(actionBarDiv.find('.text-xs').text()).toBe('Clear All');
|
|
105
106
|
|
|
106
107
|
const actionBtn = await wrapper.find('button.inline-block');
|
|
107
108
|
expect(actionBtn.exists()).toBe(true);
|
|
@@ -4,9 +4,13 @@
|
|
|
4
4
|
<div
|
|
5
5
|
class="flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
|
|
6
6
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<div class="mr-4 flex cursor-pointer items-center" @click="$emit('click:dismiss')">
|
|
8
|
+
<PCloseBtn variant="dark" class="-mr-1" />
|
|
9
|
+
<div class="text-xs">Clear All</div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="h-9 w-0.5 shrink-0 rounded bg-p-purple-50"></div>
|
|
12
|
+
<p class="mx-4 whitespace-nowrap">{{ label }}</p>
|
|
13
|
+
<div class="mr-2 h-9 w-0.5 shrink-0 rounded bg-p-purple-50"></div>
|
|
10
14
|
<div class="flex">
|
|
11
15
|
<template v-for="actionOrMenu in actions" :key="`action-${actionOrMenu.label}`">
|
|
12
16
|
<PBtn
|
|
@@ -139,6 +139,19 @@ describe('PInputNumber.vue', () => {
|
|
|
139
139
|
expect(wrapper.find('input').classes()).toEqual(expect.arrayContaining(res));
|
|
140
140
|
});
|
|
141
141
|
|
|
142
|
+
it('renders the prefix prop content when no slot is provided', () => {
|
|
143
|
+
const wrapper = createWrapperFor(PInputNumber, {
|
|
144
|
+
props: {
|
|
145
|
+
prefix: '$',
|
|
146
|
+
label: 'test input',
|
|
147
|
+
},
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const prefixDiv = wrapper.find('div > div.relative > div');
|
|
151
|
+
expect(prefixDiv.exists()).toBe(true);
|
|
152
|
+
expect(prefixDiv.text()).toBe('$');
|
|
153
|
+
});
|
|
154
|
+
|
|
142
155
|
it('emits a number on input', async () => {
|
|
143
156
|
const wrapper = createWrapperFor({
|
|
144
157
|
template: `<PInputNumber v-model="numberVal" />`,
|
|
@@ -87,3 +87,33 @@ export const Currency = {
|
|
|
87
87
|
modelValue: 2000,
|
|
88
88
|
},
|
|
89
89
|
};
|
|
90
|
+
|
|
91
|
+
export const WithPrefix = {
|
|
92
|
+
render: (args) => ({
|
|
93
|
+
components: { PInputNumber },
|
|
94
|
+
setup() {
|
|
95
|
+
return { args };
|
|
96
|
+
},
|
|
97
|
+
template: `
|
|
98
|
+
<div class="space-y-4">
|
|
99
|
+
<PInputNumber v-bind="args" prefix="$" label="Using prefix prop" />
|
|
100
|
+
<PInputNumber v-bind="args" label="Using prefix slot">
|
|
101
|
+
<template #prefix>
|
|
102
|
+
<span class="text-primary font-semibold">$</span>
|
|
103
|
+
</template>
|
|
104
|
+
</PInputNumber>
|
|
105
|
+
</div>
|
|
106
|
+
`,
|
|
107
|
+
}),
|
|
108
|
+
args: {
|
|
109
|
+
modelValue: 1234,
|
|
110
|
+
},
|
|
111
|
+
parameters: {
|
|
112
|
+
docs: {
|
|
113
|
+
description: {
|
|
114
|
+
story:
|
|
115
|
+
'The prefix can be added either using the `prefix` prop for simple text, or using the prefix slot for more complex content.',
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
};
|
|
@@ -9,8 +9,12 @@
|
|
|
9
9
|
<PInfoIcon v-if="tooltipText" :text="tooltipText" class="ml-1" />
|
|
10
10
|
</div>
|
|
11
11
|
<div class="relative w-full">
|
|
12
|
-
<div v-if="!!$slots.prefix">
|
|
13
|
-
<slot name="prefix"
|
|
12
|
+
<div v-if="!!$slots.prefix || prefix">
|
|
13
|
+
<slot name="prefix">
|
|
14
|
+
<div :class="[{ 'absolute left-3 flex items-center': prefix }, prefix ? prefixClasses[size] : '']">
|
|
15
|
+
{{ prefix }}
|
|
16
|
+
</div>
|
|
17
|
+
</slot>
|
|
14
18
|
</div>
|
|
15
19
|
<input ref="inputRef" type="text" v-bind="computedAttrs" :class="inputClasses" @focus="focus" />
|
|
16
20
|
</div>
|
|
@@ -41,6 +45,12 @@ const ALL_OPTIONS = [
|
|
|
41
45
|
'valueScaling',
|
|
42
46
|
];
|
|
43
47
|
|
|
48
|
+
const prefixClasses: Record<Size, string> = {
|
|
49
|
+
sm: 'text-sm h-8 left-2',
|
|
50
|
+
md: 'text-base h-10 left-3',
|
|
51
|
+
lg: 'text-lg h-12 left-5',
|
|
52
|
+
};
|
|
53
|
+
|
|
44
54
|
defineOptions({
|
|
45
55
|
name: 'PInputNumber',
|
|
46
56
|
inheritAttrs: false,
|
|
@@ -80,6 +90,10 @@ const props = defineProps({
|
|
|
80
90
|
type: String,
|
|
81
91
|
default: '',
|
|
82
92
|
},
|
|
93
|
+
prefix: {
|
|
94
|
+
type: String,
|
|
95
|
+
default: '',
|
|
96
|
+
},
|
|
83
97
|
});
|
|
84
98
|
|
|
85
99
|
const slots = useSlots();
|
|
@@ -87,7 +101,7 @@ const slots = useSlots();
|
|
|
87
101
|
const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
|
|
88
102
|
computed(() => ({
|
|
89
103
|
...props,
|
|
90
|
-
prefix: !!slots.prefix,
|
|
104
|
+
prefix: !!slots.prefix || !!props.prefix,
|
|
91
105
|
suffix: !!slots.suffix,
|
|
92
106
|
}))
|
|
93
107
|
);
|