@pequity/squirrel 6.1.0 → 6.1.1
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-btn.js +4 -4
- package/dist/cjs/chunks/p-select-btn.js +3 -4
- package/dist/es/chunks/p-btn.js +4 -4
- package/dist/es/chunks/p-select-btn.js +4 -5
- package/dist/squirrel/components/p-btn/p-btn.vue.d.ts +28 -28
- package/package.json +14 -14
- package/squirrel/components/p-btn/p-btn.spec.js +9 -7
- package/squirrel/components/p-btn/p-btn.vue +4 -4
- package/squirrel/components/p-select-btn/p-select-btn.spec.js +24 -5
- package/squirrel/components/p-select-btn/p-select-btn.vue +1 -1
package/dist/cjs/chunks/p-btn.js
CHANGED
|
@@ -45,17 +45,17 @@ const btnClasses = {
|
|
|
45
45
|
},
|
|
46
46
|
size: {
|
|
47
47
|
sm: {
|
|
48
|
-
button: "px-
|
|
48
|
+
button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5",
|
|
49
49
|
content: "gap-1",
|
|
50
|
-
icon: "text-
|
|
50
|
+
icon: "text-[20px]"
|
|
51
51
|
},
|
|
52
52
|
md: {
|
|
53
|
-
button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base",
|
|
53
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base",
|
|
54
54
|
content: "gap-2",
|
|
55
55
|
icon: "text-xl"
|
|
56
56
|
},
|
|
57
57
|
lg: {
|
|
58
|
-
button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
58
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7",
|
|
59
59
|
content: "gap-2.5",
|
|
60
60
|
icon: "text-2xl"
|
|
61
61
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const vue = require("vue");
|
|
3
3
|
const pBtn_vue_vue_type_script_setup_true_lang = require("./p-btn.js");
|
|
4
|
+
const _hoisted_1 = { class: "flex" };
|
|
4
5
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
5
6
|
...{
|
|
6
7
|
name: "PSelectBtn"
|
|
@@ -58,9 +59,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
58
59
|
};
|
|
59
60
|
return (_ctx, _cache) => {
|
|
60
61
|
const _directive_tooltip = vue.resolveDirective("tooltip");
|
|
61
|
-
return vue.openBlock(), vue.createElementBlock("div",
|
|
62
|
-
class: vue.normalizeClass({ flex: _ctx.grow })
|
|
63
|
-
}, [
|
|
62
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
64
63
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
|
|
65
64
|
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
|
|
66
65
|
key: String(item[_ctx.itemValue]),
|
|
@@ -95,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
95
94
|
[_directive_tooltip, { content: tooltipText(item) }]
|
|
96
95
|
]);
|
|
97
96
|
}), 128))
|
|
98
|
-
]
|
|
97
|
+
]);
|
|
99
98
|
};
|
|
100
99
|
}
|
|
101
100
|
});
|
package/dist/es/chunks/p-btn.js
CHANGED
|
@@ -44,17 +44,17 @@ const btnClasses = {
|
|
|
44
44
|
},
|
|
45
45
|
size: {
|
|
46
46
|
sm: {
|
|
47
|
-
button: "px-
|
|
47
|
+
button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5",
|
|
48
48
|
content: "gap-1",
|
|
49
|
-
icon: "text-
|
|
49
|
+
icon: "text-[20px]"
|
|
50
50
|
},
|
|
51
51
|
md: {
|
|
52
|
-
button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base",
|
|
52
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base",
|
|
53
53
|
content: "gap-2",
|
|
54
54
|
icon: "text-xl"
|
|
55
55
|
},
|
|
56
56
|
lg: {
|
|
57
|
-
button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
57
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7",
|
|
58
58
|
content: "gap-2.5",
|
|
59
59
|
icon: "text-2xl"
|
|
60
60
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { defineComponent, resolveDirective, createElementBlock, openBlock,
|
|
1
|
+
import { defineComponent, resolveDirective, createElementBlock, openBlock, Fragment, renderList, withDirectives, normalizeClass, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
|
|
2
2
|
import { _ as _sfc_main$1 } from "./p-btn.js";
|
|
3
|
+
const _hoisted_1 = { class: "flex" };
|
|
3
4
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
5
|
...{
|
|
5
6
|
name: "PSelectBtn"
|
|
@@ -57,9 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
57
58
|
};
|
|
58
59
|
return (_ctx, _cache) => {
|
|
59
60
|
const _directive_tooltip = resolveDirective("tooltip");
|
|
60
|
-
return openBlock(), createElementBlock("div",
|
|
61
|
-
class: normalizeClass({ flex: _ctx.grow })
|
|
62
|
-
}, [
|
|
61
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
63
62
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
|
|
64
63
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
65
64
|
key: String(item[_ctx.itemValue]),
|
|
@@ -94,7 +93,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
94
93
|
[_directive_tooltip, { content: tooltipText(item) }]
|
|
95
94
|
]);
|
|
96
95
|
}), 128))
|
|
97
|
-
]
|
|
96
|
+
]);
|
|
98
97
|
};
|
|
99
98
|
}
|
|
100
99
|
});
|
|
@@ -49,17 +49,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
};
|
|
50
50
|
readonly size: {
|
|
51
51
|
readonly sm: {
|
|
52
|
-
readonly button: "px-
|
|
52
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
53
53
|
readonly content: "gap-1";
|
|
54
|
-
readonly icon: "text-
|
|
54
|
+
readonly icon: "text-[20px]";
|
|
55
55
|
};
|
|
56
56
|
readonly md: {
|
|
57
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
57
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
58
58
|
readonly content: "gap-2";
|
|
59
59
|
readonly icon: "text-xl";
|
|
60
60
|
};
|
|
61
61
|
readonly lg: {
|
|
62
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
62
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
63
63
|
readonly content: "gap-2.5";
|
|
64
64
|
readonly icon: "text-2xl";
|
|
65
65
|
};
|
|
@@ -114,17 +114,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
114
114
|
};
|
|
115
115
|
readonly size: {
|
|
116
116
|
readonly sm: {
|
|
117
|
-
readonly button: "px-
|
|
117
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
118
118
|
readonly content: "gap-1";
|
|
119
|
-
readonly icon: "text-
|
|
119
|
+
readonly icon: "text-[20px]";
|
|
120
120
|
};
|
|
121
121
|
readonly md: {
|
|
122
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
122
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
123
123
|
readonly content: "gap-2";
|
|
124
124
|
readonly icon: "text-xl";
|
|
125
125
|
};
|
|
126
126
|
readonly lg: {
|
|
127
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
127
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
128
128
|
readonly content: "gap-2.5";
|
|
129
129
|
readonly icon: "text-2xl";
|
|
130
130
|
};
|
|
@@ -174,17 +174,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
174
174
|
};
|
|
175
175
|
readonly size: {
|
|
176
176
|
readonly sm: {
|
|
177
|
-
readonly button: "px-
|
|
177
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
178
178
|
readonly content: "gap-1";
|
|
179
|
-
readonly icon: "text-
|
|
179
|
+
readonly icon: "text-[20px]";
|
|
180
180
|
};
|
|
181
181
|
readonly md: {
|
|
182
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
182
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
183
183
|
readonly content: "gap-2";
|
|
184
184
|
readonly icon: "text-xl";
|
|
185
185
|
};
|
|
186
186
|
readonly lg: {
|
|
187
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
187
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
188
188
|
readonly content: "gap-2.5";
|
|
189
189
|
readonly icon: "text-2xl";
|
|
190
190
|
};
|
|
@@ -234,17 +234,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
234
234
|
};
|
|
235
235
|
readonly size: {
|
|
236
236
|
readonly sm: {
|
|
237
|
-
readonly button: "px-
|
|
237
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
238
238
|
readonly content: "gap-1";
|
|
239
|
-
readonly icon: "text-
|
|
239
|
+
readonly icon: "text-[20px]";
|
|
240
240
|
};
|
|
241
241
|
readonly md: {
|
|
242
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
242
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
243
243
|
readonly content: "gap-2";
|
|
244
244
|
readonly icon: "text-xl";
|
|
245
245
|
};
|
|
246
246
|
readonly lg: {
|
|
247
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
247
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
248
248
|
readonly content: "gap-2.5";
|
|
249
249
|
readonly icon: "text-2xl";
|
|
250
250
|
};
|
|
@@ -299,17 +299,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
299
299
|
};
|
|
300
300
|
readonly size: {
|
|
301
301
|
readonly sm: {
|
|
302
|
-
readonly button: "px-
|
|
302
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
303
303
|
readonly content: "gap-1";
|
|
304
|
-
readonly icon: "text-
|
|
304
|
+
readonly icon: "text-[20px]";
|
|
305
305
|
};
|
|
306
306
|
readonly md: {
|
|
307
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
307
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
308
308
|
readonly content: "gap-2";
|
|
309
309
|
readonly icon: "text-xl";
|
|
310
310
|
};
|
|
311
311
|
readonly lg: {
|
|
312
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
312
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
313
313
|
readonly content: "gap-2.5";
|
|
314
314
|
readonly icon: "text-2xl";
|
|
315
315
|
};
|
|
@@ -364,17 +364,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
364
364
|
};
|
|
365
365
|
readonly size: {
|
|
366
366
|
readonly sm: {
|
|
367
|
-
readonly button: "px-
|
|
367
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
368
368
|
readonly content: "gap-1";
|
|
369
|
-
readonly icon: "text-
|
|
369
|
+
readonly icon: "text-[20px]";
|
|
370
370
|
};
|
|
371
371
|
readonly md: {
|
|
372
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
372
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
373
373
|
readonly content: "gap-2";
|
|
374
374
|
readonly icon: "text-xl";
|
|
375
375
|
};
|
|
376
376
|
readonly lg: {
|
|
377
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
377
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
378
378
|
readonly content: "gap-2.5";
|
|
379
379
|
readonly icon: "text-2xl";
|
|
380
380
|
};
|
|
@@ -424,17 +424,17 @@ declare const btn: import("tailwind-variants").TVReturnType<{
|
|
|
424
424
|
};
|
|
425
425
|
readonly size: {
|
|
426
426
|
readonly sm: {
|
|
427
|
-
readonly button: "px-
|
|
427
|
+
readonly button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5";
|
|
428
428
|
readonly content: "gap-1";
|
|
429
|
-
readonly icon: "text-
|
|
429
|
+
readonly icon: "text-[20px]";
|
|
430
430
|
};
|
|
431
431
|
readonly md: {
|
|
432
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base";
|
|
432
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base";
|
|
433
433
|
readonly content: "gap-2";
|
|
434
434
|
readonly icon: "text-xl";
|
|
435
435
|
};
|
|
436
436
|
readonly lg: {
|
|
437
|
-
readonly button: "px-6 has-[.slot-wrapper:empty]:px-
|
|
437
|
+
readonly button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7";
|
|
438
438
|
readonly content: "gap-2.5";
|
|
439
439
|
readonly icon: "text-2xl";
|
|
440
440
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pequity/squirrel",
|
|
3
3
|
"description": "Squirrel component library",
|
|
4
|
-
"version": "6.1.
|
|
4
|
+
"version": "6.1.1",
|
|
5
5
|
"packageManager": "pnpm@9.15.5",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
@@ -54,19 +54,19 @@
|
|
|
54
54
|
"@playwright/test": "^1.50.1",
|
|
55
55
|
"@semantic-release/changelog": "^6.0.3",
|
|
56
56
|
"@semantic-release/git": "^10.0.1",
|
|
57
|
-
"@storybook/addon-a11y": "^8.
|
|
58
|
-
"@storybook/addon-actions": "^8.
|
|
59
|
-
"@storybook/addon-essentials": "^8.
|
|
60
|
-
"@storybook/addon-interactions": "^8.
|
|
61
|
-
"@storybook/addon-links": "^8.
|
|
62
|
-
"@storybook/blocks": "^8.
|
|
63
|
-
"@storybook/manager-api": "^8.
|
|
64
|
-
"@storybook/test": "^8.
|
|
57
|
+
"@storybook/addon-a11y": "^8.6.0",
|
|
58
|
+
"@storybook/addon-actions": "^8.6.0",
|
|
59
|
+
"@storybook/addon-essentials": "^8.6.0",
|
|
60
|
+
"@storybook/addon-interactions": "^8.6.0",
|
|
61
|
+
"@storybook/addon-links": "^8.6.0",
|
|
62
|
+
"@storybook/blocks": "^8.6.0",
|
|
63
|
+
"@storybook/manager-api": "^8.6.0",
|
|
64
|
+
"@storybook/test": "^8.6.0",
|
|
65
65
|
"@storybook/test-runner": "^0.21.3",
|
|
66
|
-
"@storybook/theming": "^8.
|
|
67
|
-
"@storybook/vue3": "^8.
|
|
68
|
-
"@storybook/vue3-vite": "^8.
|
|
69
|
-
"@tanstack/vue-virtual": "3.13.
|
|
66
|
+
"@storybook/theming": "^8.6.0",
|
|
67
|
+
"@storybook/vue3": "^8.6.0",
|
|
68
|
+
"@storybook/vue3-vite": "^8.6.0",
|
|
69
|
+
"@tanstack/vue-virtual": "3.13.2",
|
|
70
70
|
"@types/jsdom": "^21.1.7",
|
|
71
71
|
"@types/lodash-es": "^4.17.12",
|
|
72
72
|
"@types/node": "^22.13.5",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"rimraf": "^6.0.1",
|
|
95
95
|
"sass": "^1.85.1",
|
|
96
96
|
"semantic-release": "^24.2.3",
|
|
97
|
-
"storybook": "^8.
|
|
97
|
+
"storybook": "^8.6.0",
|
|
98
98
|
"svgo": "^3.3.2",
|
|
99
99
|
"tailwindcss": "^3.4.17",
|
|
100
100
|
"typescript": "5.7.3",
|
|
@@ -175,9 +175,9 @@ describe('PBtn.vue', () => {
|
|
|
175
175
|
});
|
|
176
176
|
|
|
177
177
|
it.each([
|
|
178
|
-
['sm', ['py-1', 'px-
|
|
178
|
+
['sm', ['py-1.5', 'px-3', 'rounded', 'font-medium', 'text-sm', 'leading-5']],
|
|
179
179
|
['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
|
|
180
|
-
['lg', ['py-
|
|
180
|
+
['lg', ['py-3', 'px-6', 'rounded', 'font-medium', 'text-lg']],
|
|
181
181
|
])('renders a button of size %s', async (size, classes) => {
|
|
182
182
|
const wrapper = createWrapperFor(PBtn, { props: { size }, slots: { default: `button` } });
|
|
183
183
|
|
|
@@ -256,7 +256,7 @@ describe('PBtn.vue', () => {
|
|
|
256
256
|
|
|
257
257
|
describe('icon button', () => {
|
|
258
258
|
it.each([
|
|
259
|
-
['sm', ['shrink-0', 'text-
|
|
259
|
+
['sm', ['shrink-0', 'text-[20px]']],
|
|
260
260
|
['md', ['shrink-0', 'text-xl']],
|
|
261
261
|
['lg', ['shrink-0', 'text-2xl']],
|
|
262
262
|
])('renders a button with icon of size %s', async (size, classes) => {
|
|
@@ -268,11 +268,13 @@ describe('PBtn.vue', () => {
|
|
|
268
268
|
|
|
269
269
|
const icon = await wrapper.findComponent({ name: 'PIcon' });
|
|
270
270
|
|
|
271
|
+
console.log(icon.classes());
|
|
272
|
+
|
|
271
273
|
expect(classes.every((c) => icon.classes().includes(c))).toBe(true);
|
|
272
274
|
});
|
|
273
275
|
|
|
274
276
|
it.each([
|
|
275
|
-
['sm', ['shrink-0', 'text-
|
|
277
|
+
['sm', ['shrink-0', 'text-[20px]']],
|
|
276
278
|
['md', ['shrink-0', 'text-xl']],
|
|
277
279
|
['lg', ['shrink-0', 'text-2xl']],
|
|
278
280
|
])('renders a button with a right icon of size %s', async (size, classes) => {
|
|
@@ -288,9 +290,9 @@ describe('PBtn.vue', () => {
|
|
|
288
290
|
});
|
|
289
291
|
|
|
290
292
|
it.each([
|
|
291
|
-
['sm', ['shrink-0', 'text-
|
|
292
|
-
['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2']],
|
|
293
|
-
['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-
|
|
293
|
+
['sm', ['shrink-0', 'text-[20px]'], ['has-[.slot-wrapper:empty]:px-1.5']],
|
|
294
|
+
['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2.5']],
|
|
295
|
+
['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-3']],
|
|
294
296
|
])('renders a button with an icon without text of size %s', async (size, classes, buttonClasses) => {
|
|
295
297
|
const wrapper = createWrapperFor(PBtn, {
|
|
296
298
|
props: { size, icon: 'edit' },
|
|
@@ -84,17 +84,17 @@ const btnClasses = {
|
|
|
84
84
|
},
|
|
85
85
|
size: {
|
|
86
86
|
sm: {
|
|
87
|
-
button: 'px-
|
|
87
|
+
button: 'px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5',
|
|
88
88
|
content: 'gap-1',
|
|
89
|
-
icon: 'text-
|
|
89
|
+
icon: 'text-[20px]',
|
|
90
90
|
},
|
|
91
91
|
md: {
|
|
92
|
-
button: 'px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base',
|
|
92
|
+
button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base',
|
|
93
93
|
content: 'gap-2',
|
|
94
94
|
icon: 'text-xl',
|
|
95
95
|
},
|
|
96
96
|
lg: {
|
|
97
|
-
button: 'px-6 has-[.slot-wrapper:empty]:px-
|
|
97
|
+
button: 'px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7',
|
|
98
98
|
content: 'gap-2.5',
|
|
99
99
|
icon: 'text-2xl',
|
|
100
100
|
},
|
|
@@ -134,7 +134,7 @@ describe('PSelectBtn.vue', () => {
|
|
|
134
134
|
},
|
|
135
135
|
});
|
|
136
136
|
|
|
137
|
-
const buttonDivs =
|
|
137
|
+
const buttonDivs = wrapper.findAll('div.inline-flex');
|
|
138
138
|
|
|
139
139
|
buttonDivs.forEach((buttonDiv, i) => {
|
|
140
140
|
expect(buttonDiv.attributes()['data-tooltip']).toBe(items[i].textCustom);
|
|
@@ -213,6 +213,25 @@ describe('PSelectBtn.vue', () => {
|
|
|
213
213
|
});
|
|
214
214
|
});
|
|
215
215
|
|
|
216
|
+
it('renders auto-width buttons', async () => {
|
|
217
|
+
const wrapper = createWrapperFor(PSelectBtn, {
|
|
218
|
+
props: {
|
|
219
|
+
items,
|
|
220
|
+
itemValue: 'valueCustom',
|
|
221
|
+
itemText: 'textCustom',
|
|
222
|
+
modelValue: 2,
|
|
223
|
+
grow: false,
|
|
224
|
+
},
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
const buttons = await wrapper.findAll('button');
|
|
228
|
+
|
|
229
|
+
expect(wrapper.classes()).toContain('flex');
|
|
230
|
+
buttons.forEach((button) => {
|
|
231
|
+
expect(button.classes()).not.toContain('flex-1');
|
|
232
|
+
});
|
|
233
|
+
});
|
|
234
|
+
|
|
216
235
|
it('removes padding from buttons', async () => {
|
|
217
236
|
const wrapper = createWrapperFor(PSelectBtn, {
|
|
218
237
|
props: {
|
|
@@ -224,11 +243,11 @@ describe('PSelectBtn.vue', () => {
|
|
|
224
243
|
},
|
|
225
244
|
});
|
|
226
245
|
|
|
227
|
-
const
|
|
246
|
+
const buttonDivs = wrapper.findAll('div.inline-flex');
|
|
228
247
|
|
|
229
|
-
|
|
230
|
-
expect(
|
|
231
|
-
expect(
|
|
248
|
+
buttonDivs.forEach((buttonDiv) => {
|
|
249
|
+
expect(buttonDiv.classes()).toContain('*:px-0');
|
|
250
|
+
expect(buttonDiv.classes()).toContain('*:py-0');
|
|
232
251
|
});
|
|
233
252
|
});
|
|
234
253
|
|