@pequity/squirrel 6.1.0 → 7.0.0

package/dist/squirrel.css

@@ -436,16 +436,16 @@ to {
 100% {
     transform: translateX(100%);
 }
-}.filter[data-v-cbac2434] {
+}.filter[data-v-84864117] {
   background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M15.5%206.73H4.5C4.36739%206.73%204.24021%206.67732%204.14645%206.58355C4.05268%206.48978%204%206.3626%204%206.23C4%206.09739%204.05268%205.97021%204.14645%205.87644C4.24021%205.78267%204.36739%205.73%204.5%205.73H15.5C15.6326%205.73%2015.7598%205.78267%2015.8536%205.87644C15.9473%205.97021%2016%206.09739%2016%206.23C16%206.3626%2015.9473%206.48978%2015.8536%206.58355C15.7598%206.67732%2015.6326%206.73%2015.5%206.73Z'%20fill='%23424E6E'/%3e%3cpath%20d='M14.33%209.245H5.67C5.53739%209.245%205.41021%209.19232%205.31644%209.09855C5.22268%209.00478%205.17%208.8776%205.17%208.745C5.17%208.61239%205.22268%208.48521%205.31644%208.39144C5.41021%208.29767%205.53739%208.245%205.67%208.245H14.33C14.4626%208.245%2014.5898%208.29767%2014.6836%208.39144C14.7773%208.48521%2014.83%208.61239%2014.83%208.745C14.83%208.8776%2014.7773%209.00478%2014.6836%209.09855C14.5898%209.19232%2014.4626%209.245%2014.33%209.245Z'%20fill='%23424E6E'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1235C7.94768%2014.0298%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4164C8.13522%2013.3227%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3227%2011.9586%2013.4164C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0298%2011.9586%2014.1235C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%23424E6E'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6085C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9014C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9014C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6085C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%23424E6E'/%3e%3c/svg%3e") no-repeat;
 }
-.filter[data-v-cbac2434]:hover {
+.filter[data-v-84864117]:hover {
   background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='20'%20height='20'%20rx='4'%20fill='black'%20fill-opacity='0.05'/%3e%3cpath%20d='M15.5%206.73001H4.5C4.36739%206.73001%204.24021%206.67733%204.14645%206.58356C4.05268%206.4898%204%206.36262%204%206.23001C4%206.0974%204.05268%205.97023%204.14645%205.87646C4.24021%205.78269%204.36739%205.73001%204.5%205.73001H15.5C15.6326%205.73001%2015.7598%205.78269%2015.8536%205.87646C15.9473%205.97023%2016%206.0974%2016%206.23001C16%206.36262%2015.9473%206.4898%2015.8536%206.58356C15.7598%206.67733%2015.6326%206.73001%2015.5%206.73001Z'%20fill='%23424E6E'/%3e%3cpath%20d='M14.33%209.24503H5.67C5.53739%209.24503%205.41021%209.19235%205.31644%209.09858C5.22268%209.00481%205.17%208.87763%205.17%208.74503C5.17%208.61242%205.22268%208.48524%205.31644%208.39147C5.41021%208.2977%205.53739%208.24503%205.67%208.24503H14.33C14.4626%208.24503%2014.5898%208.2977%2014.6836%208.39147C14.7773%208.48524%2014.83%208.61242%2014.83%208.74503C14.83%208.87763%2014.7773%209.00481%2014.6836%209.09858C14.5898%209.19235%2014.4626%209.24503%2014.33%209.24503Z'%20fill='%23424E6E'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1236C7.94768%2014.0298%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4165C8.13522%2013.3227%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3227%2011.9586%2013.4165C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0298%2011.9586%2014.1236C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%23424E6E'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6086C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9015C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9015C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6086C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%23424E6E'/%3e%3c/svg%3e") no-repeat;
 }
-.filter.active[data-v-cbac2434] {
+.filter.active[data-v-84864117] {
   background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M15.5%206.72998H4.5C4.36739%206.72998%204.24021%206.6773%204.14645%206.58353C4.05268%206.48977%204%206.36259%204%206.22998C4%206.09737%204.05268%205.9702%204.14645%205.87643C4.24021%205.78266%204.36739%205.72998%204.5%205.72998H15.5C15.6326%205.72998%2015.7598%205.78266%2015.8536%205.87643C15.9473%205.9702%2016%206.09737%2016%206.22998C16%206.36259%2015.9473%206.48977%2015.8536%206.58353C15.7598%206.6773%2015.6326%206.72998%2015.5%206.72998Z'%20fill='%230F45AF'/%3e%3cpath%20d='M14.33%209.245H5.67C5.53739%209.245%205.41021%209.19232%205.31644%209.09855C5.22268%209.00478%205.17%208.8776%205.17%208.745C5.17%208.61239%205.22268%208.48521%205.31644%208.39144C5.41021%208.29767%205.53739%208.245%205.67%208.245H14.33C14.4626%208.245%2014.5898%208.29767%2014.6836%208.39144C14.7773%208.48521%2014.83%208.61239%2014.83%208.745C14.83%208.8776%2014.7773%209.00478%2014.6836%209.09855C14.5898%209.19232%2014.4626%209.245%2014.33%209.245Z'%20fill='%230F45AF'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1235C7.94768%2014.0297%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4164C8.13522%2013.3226%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3226%2011.9586%2013.4164C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0297%2011.9586%2014.1235C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%230F45AF'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6086C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9015C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9015C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6086C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%230F45AF'/%3e%3c/svg%3e") no-repeat;
 }
-.filter.active[data-v-cbac2434]:hover {
+.filter.active[data-v-84864117]:hover {
   background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='20'%20height='20'%20rx='4'%20fill='black'%20fill-opacity='0.05'/%3e%3cpath%20d='M15.5%206.72998H4.5C4.36739%206.72998%204.24021%206.6773%204.14645%206.58353C4.05268%206.48977%204%206.36259%204%206.22998C4%206.09737%204.05268%205.9702%204.14645%205.87643C4.24021%205.78266%204.36739%205.72998%204.5%205.72998H15.5C15.6326%205.72998%2015.7598%205.78266%2015.8536%205.87643C15.9473%205.9702%2016%206.09737%2016%206.22998C16%206.36259%2015.9473%206.48977%2015.8536%206.58353C15.7598%206.6773%2015.6326%206.72998%2015.5%206.72998Z'%20fill='%230F45AF'/%3e%3cpath%20d='M14.33%209.245H5.67C5.53739%209.245%205.41021%209.19232%205.31644%209.09855C5.22268%209.00478%205.17%208.8776%205.17%208.745C5.17%208.61239%205.22268%208.48521%205.31644%208.39144C5.41021%208.29767%205.53739%208.245%205.67%208.245H14.33C14.4626%208.245%2014.5898%208.29767%2014.6836%208.39144C14.7773%208.48521%2014.83%208.61239%2014.83%208.745C14.83%208.8776%2014.7773%209.00478%2014.6836%209.09855C14.5898%209.19232%2014.4626%209.245%2014.33%209.245Z'%20fill='%230F45AF'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1235C7.94768%2014.0297%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4164C8.13522%2013.3226%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3226%2011.9586%2013.4164C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0297%2011.9586%2014.1235C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%230F45AF'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6086C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9015C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9015C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6086C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%230F45AF'/%3e%3c/svg%3e") no-repeat;
 }.td-shadow-right[data-v-c9978e26] {
   box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
@@ -465,7 +465,7 @@ to {
   --tw-content: "";
   content: var(--tw-content);
 }
-.shadow-inner-toggle[data-v-152f5bf8]::after {
+.shadow-inner-toggle[data-v-be9ecb77]::after {
   box-shadow:
     rgba(0, 0, 0, 0.3) 0px 1px 2px 0px,
     rgba(0, 0, 0, 0.05) 0px 0px 1px 0px inset;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.1.0",
-  "packageManager": "pnpm@9.15.5",
+  "version": "7.0.0",
+  "packageManager": "pnpm@9.15.6",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -54,22 +54,22 @@
     "@playwright/test": "^1.50.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.5.8",
-    "@storybook/addon-actions": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-links": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/manager-api": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/test-runner": "^0.21.3",
-    "@storybook/theming": "^8.5.8",
-    "@storybook/vue3": "^8.5.8",
-    "@storybook/vue3-vite": "^8.5.8",
-    "@tanstack/vue-virtual": "3.13.1",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-actions": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/manager-api": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.3",
+    "@storybook/vue3": "^8.6.3",
+    "@storybook/vue3-vite": "^8.6.3",
+    "@tanstack/vue-virtual": "3.13.2",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.8",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^3.0.7",
     "@vue/compiler-sfc": "3.5.13",
@@ -88,13 +88,13 @@
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
     "sass": "^1.85.1",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.3",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
@@ -104,7 +104,7 @@
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.2.4"
+    "vue-tsc": "2.2.8"
   },
   "dependencies": {
     "tailwind-variants": "^0.3.1"

package/squirrel/components/p-alert/p-alert.spec.js

@@ -3,18 +3,18 @@ import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PAlert.vue', () => {
   it.each([
-    ['info', ['bg-info', 'text-on-info']],
-    ['warning', ['bg-warning', 'text-on-warning']],
-    ['success', ['bg-success', 'text-on-success']],
-    ['error', ['bg-error', 'text-on-error']],
-  ])('renders an alert of type %s', async (type, classes) => {
-    const wrapper = createWrapperFor(PAlert, { props: { type } });
+    ['info', ['bg-info', 'text-on-info'], 'streamline:information-circle-solid'],
+    ['warning', ['bg-warning', 'text-on-warning'], 'streamline:warning-triangle-solid'],
+    ['error', ['bg-error', 'text-on-error'], 'streamline:warning-octagon-solid'],
+    ['success', ['bg-success', 'text-on-success'], 'streamline:check-square-solid'],
+  ])('renders an alert of type %s', async (type, classes, iconName) => {
+    const wrapper = createWrapperFor(PAlert, { props: { type }, global: { stubs: { PIcon: true } } });
 
     const alert = await wrapper.find('div[role="alert"]');
-    const path = wrapper.find('path');
+    const icon = wrapper.findComponent({ name: 'PIcon' });
 
     expect(classes.every((c) => alert.classes().includes(c))).toBe(true);
-    expect(path.attributes().fill).toBe(`rgb(var(--color-on-${type}))`);
+    expect(icon.props().icon).toBe(iconName);
   });
 
   it('renders slots for icon and content', async () => {
@@ -23,6 +23,7 @@ describe('PAlert.vue', () => {
         default: `This is an alert`,
         icon: `<i class="test-icon"></i>`,
       },
+      global: { stubs: { PIcon: true } },
     });
 
     const alert = await wrapper.find('div[role="alert"]');

package/squirrel/components/p-alert/p-alert.vue

@@ -1,53 +1,41 @@
 <template>
-  <div :class="['rounded p-4 text-xs font-semibold', classes]" role="alert">
+  <div :class="['rounded p-4 text-xs font-semibold', ALERT_TYPES[props.type].classes]" role="alert">
     <div class="flex">
       <div class="pr-2">
         <slot name="icon">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M8 0C6.41775 0 4.87104 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346629 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0V0ZM8.16667 3.33333C8.36445 3.33333 8.55779 3.39198 8.72224 3.50186C8.88669 3.61175 9.01486 3.76792 9.09055 3.95065C9.16624 4.13338 9.18604 4.33444 9.14746 4.52842C9.10887 4.72241 9.01363 4.90059 8.87378 5.04044C8.73392 5.18029 8.55574 5.27553 8.36176 5.31412C8.16778 5.3527 7.96671 5.3329 7.78399 5.25721C7.60126 5.18153 7.44508 5.05335 7.3352 4.8889C7.22532 4.72445 7.16667 4.53112 7.16667 4.33333C7.16667 4.06812 7.27203 3.81376 7.45956 3.62623C7.6471 3.43869 7.90145 3.33333 8.16667 3.33333ZM9.66667 12.3333H7C6.82319 12.3333 6.65362 12.2631 6.5286 12.1381C6.40358 12.013 6.33334 11.8435 6.33334 11.6667C6.33334 11.4899 6.40358 11.3203 6.5286 11.1953C6.65362 11.0702 6.82319 11 7 11H7.5C7.54421 11 7.5866 10.9824 7.61786 10.9512C7.64911 10.9199 7.66667 10.8775 7.66667 10.8333V7.83333C7.66667 7.78913 7.64911 7.74674 7.61786 7.71548C7.5866 7.68423 7.54421 7.66667 7.5 7.66667H7C6.82319 7.66667 6.65362 7.59643 6.5286 7.47141C6.40358 7.34638 6.33334 7.17681 6.33334 7C6.33334 6.82319 6.40358 6.65362 6.5286 6.5286C6.65362 6.40357 6.82319 6.33333 7 6.33333H7.66667C8.02029 6.33333 8.35943 6.47381 8.60948 6.72386C8.85953 6.97391 9 7.31305 9 7.66667V10.8333C9 10.8775 9.01756 10.9199 9.04882 10.9512C9.08008 10.9824 9.12247 11 9.16667 11H9.66667C9.84348 11 10.0131 11.0702 10.1381 11.1953C10.2631 11.3203 10.3333 11.4899 10.3333 11.6667C10.3333 11.8435 10.2631 12.013 10.1381 12.1381C10.0131 12.2631 9.84348 12.3333 9.66667 12.3333Z"
-              :fill="svgColor"
-            />
-          </svg>
+          <PIcon :icon="ALERT_TYPES[props.type].icon" width="16" class="-mb-0.5" inline />
         </slot>
       </div>
       <div>
-        <slot />
+        <slot></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { type Color, getColor } from '@squirrel/utils/tailwind';
-import { defineComponent, type PropType } from 'vue';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import { type PropType } from 'vue';
 
 const ALERT_TYPES = {
-  info: `bg-info text-on-info`,
-  warning: `bg-warning text-on-warning`,
-  error: `bg-error text-on-error`,
-  success: `bg-success text-on-success`,
+  info: { classes: `bg-info text-on-info`, icon: 'streamline:information-circle-solid' },
+  warning: { classes: `bg-warning text-on-warning`, icon: 'streamline:warning-triangle-solid' },
+  error: { classes: `bg-error text-on-error`, icon: 'streamline:warning-octagon-solid' },
+  success: { classes: `bg-success text-on-success`, icon: 'streamline:check-square-solid' },
 };
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PAlert',
-  props: {
-    type: {
-      type: String as PropType<keyof typeof ALERT_TYPES>,
-      default: 'info',
-      validator(value: keyof typeof ALERT_TYPES) {
-        return Object.keys(ALERT_TYPES).includes(value);
-      },
-    },
-  },
-  computed: {
-    classes() {
-      return `${ALERT_TYPES[this.type]}`;
-    },
-    svgColor() {
-      const type = `on-${this.type}` as Color;
+});
 
-      return getColor(type);
+const props = defineProps({
+  type: {
+    type: String as PropType<keyof typeof ALERT_TYPES>,
+    default: 'info',
+    validator(value: keyof typeof ALERT_TYPES) {
+      return Object.keys(ALERT_TYPES).includes(value);
     },
   },
 });

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

@@ -76,10 +76,17 @@ describe('PAvatar.vue', () => {
       },
     });
 
-    await wrapper.setData({ imageBroken: true });
-    expect(wrapper.vm.imageBroken).toBe(true);
+    const img = () => wrapper.find('img');
+    const label = () => wrapper.find('div.items-center');
+
+    await img().trigger('error');
+
+    expect(img().exists()).toBe(false);
+    expect(label().exists()).toBe(true);
 
     await wrapper.setProps({ imageSrc: 'new-src.jpg' });
-    expect(wrapper.vm.imageBroken).toBe(false);
+
+    expect(img().exists()).toBe(true);
+    expect(label().exists()).toBe(false);
   });
 });

package/squirrel/components/p-avatar/p-avatar.vue

@@ -15,57 +15,55 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, type PropType, ref, watch } from 'vue';
 
-const SHAPES = {
-  rectangle: 'rectangle',
-  circle: 'circle',
-};
+const SHAPES = ['rectangle', 'circle'] as const;
+
+type Shape = (typeof SHAPES)[number];
 
 const SHAPE_CLASSES = {
-  [SHAPES.rectangle]: 'rounded-lg',
-  [SHAPES.circle]: 'rounded-full',
+  rectangle: 'rounded-lg',
+  circle: 'rounded-full',
 };
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PAvatar',
-  props: {
-    shape: {
-      type: String,
-      default: SHAPES.circle,
-      validator: (value: string) => Object.values(SHAPES).includes(value),
-    },
-    imageSrc: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    imageClass: {
-      type: String,
-      default: '',
-    },
-    labelClass: {
-      type: String,
-      default: '',
-    },
+});
+
+const props = defineProps({
+  shape: {
+    type: String as PropType<Shape>,
+    default: 'circle',
+    validator: (value: Shape) => SHAPES.includes(value),
   },
-  data() {
-    return {
-      imageBroken: false,
-    };
+  imageSrc: {
+    type: String,
+    default: '',
   },
-  computed: {
-    shapeClass() {
-      return SHAPE_CLASSES[this.shape];
-    },
+  label: {
+    type: String,
+    required: true,
   },
-  watch: {
-    imageSrc() {
-      this.imageBroken = false;
-    },
+  imageClass: {
+    type: String,
+    default: '',
+  },
+  labelClass: {
+    type: String,
+    default: '',
   },
 });
+
+const imageBroken = ref<boolean>(false);
+
+const shapeClass = computed(() => SHAPE_CLASSES[props.shape]);
+
+watch(
+  () => props.imageSrc,
+  () => {
+    imageBroken.value = false;
+  }
+);
 </script>

package/squirrel/components/p-btn/p-btn.spec.js

@@ -175,9 +175,9 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['py-1', 'px-2', 'rounded', 'font-medium', 'text-sm']],
+      ['sm', ['py-1.5', 'px-3', 'rounded', 'font-medium', 'text-sm', 'leading-5']],
       ['md', ['py-2', 'px-6', 'rounded', 'font-medium', 'text-base']],
-      ['lg', ['py-2.5', 'px-6', 'rounded', 'font-medium', 'text-lg']],
+      ['lg', ['py-3', 'px-6', 'rounded', 'font-medium', 'text-lg', 'leading-6']],
     ])('renders a button of size %s', async (size, classes) => {
       const wrapper = createWrapperFor(PBtn, { props: { size }, slots: { default: `button` } });
 
@@ -256,7 +256,7 @@ describe('PBtn.vue', () => {
 
   describe('icon button', () => {
     it.each([
-      ['sm', ['shrink-0', 'text-lg']],
+      ['sm', ['shrink-0', 'text-[20px]']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with icon of size %s', async (size, classes) => {
@@ -272,7 +272,7 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-lg']],
+      ['sm', ['shrink-0', 'text-[20px]']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with a right icon of size %s', async (size, classes) => {
@@ -288,9 +288,9 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-lg'], ['has-[.slot-wrapper:empty]:px-1']],
-      ['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2']],
-      ['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-2.5']],
+      ['sm', ['shrink-0', 'text-[20px]'], ['has-[.slot-wrapper:empty]:px-1.5']],
+      ['md', ['shrink-0', 'text-xl'], ['has-[.slot-wrapper:empty]:px-2.5']],
+      ['lg', ['shrink-0', 'text-2xl'], ['has-[.slot-wrapper:empty]:px-3']],
     ])('renders a button with an icon without text of size %s', async (size, classes, buttonClasses) => {
       const wrapper = createWrapperFor(PBtn, {
         props: { size, icon: 'edit' },

package/squirrel/components/p-btn/p-btn.vue

@@ -84,17 +84,17 @@ const btnClasses = {
     },
     size: {
       sm: {
-        button: 'px-2 has-[.slot-wrapper:empty]:px-1 py-1 text-sm',
+        button: 'px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5',
         content: 'gap-1',
-        icon: 'text-lg',
+        icon: 'text-[20px]',
       },
       md: {
-        button: 'px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base',
+        button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base',
         content: 'gap-2',
         icon: 'text-xl',
       },
       lg: {
-        button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 py-2.5 text-lg',
+        button: 'px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-6',
         content: 'gap-2.5',
         icon: 'text-2xl',
       },

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

@@ -25,57 +25,80 @@
 </template>
 
 <script lang="ts">
-import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
-import { defineComponent, type PropType, type StyleValue } from 'vue';
+import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import { useInputClasses } from '@squirrel/composables/useInputClasses';
+import { computed, type PropType, type StyleValue, useAttrs, useSlots } from 'vue';
 
 const INPUT_TYPES = { TEXT: 'text', PASSWORD: 'password' };
 
 type InputTypeKeys = keyof typeof INPUT_TYPES;
 type InputType = (typeof INPUT_TYPES)[InputTypeKeys];
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PInput',
-  mixins: [inputClassesMixin],
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    type: {
-      type: String as PropType<InputType>,
-      default: INPUT_TYPES.TEXT,
-      validator(value: InputType) {
-        return Object.values(INPUT_TYPES).includes(value);
-      },
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    errorMsg: {
-      type: String,
-      default: '',
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
+});
 
-      return rest;
+defineEmits(['update:modelValue']);
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean, null] as PropType<string | number | boolean | null>,
+    default: '',
+  },
+  type: {
+    type: String as PropType<InputType>,
+    default: INPUT_TYPES.TEXT,
+    validator(value: InputType) {
+      return Object.values(INPUT_TYPES).includes(value);
     },
-    style() {
-      return this.$attrs.style as StyleValue;
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  errorMsg: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const slots = useSlots();
+
+const { labelClasses, inputClasses, errorMsgClasses } = useInputClasses(
+  computed(() => ({
+    ...props,
+    prefix: !!slots.prefix,
+    suffix: !!slots.suffix,
+  }))
+);
+
+const allAttrs = useAttrs();
+
+const attrs = computed(() => {
+  const { class: classes, style, ...rest } = allAttrs;
+
+  return rest;
+});
+
+const style = computed(() => {
+  return allAttrs.style as StyleValue;
 });
 </script>