@pequity/squirrel 6.1.1 → 7.0.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.1.1",
-  "packageManager": "pnpm@9.15.5",
+  "version": "7.0.1",
+  "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -48,37 +48,37 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.7.1",
-    "@commitlint/config-conventional": "^19.7.1",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
     "@pequity/eslint-config": "^1.1.1",
-    "@playwright/test": "^1.50.1",
+    "@playwright/test": "^1.51.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.6.0",
-    "@storybook/addon-actions": "^8.6.0",
-    "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-interactions": "^8.6.0",
-    "@storybook/addon-links": "^8.6.0",
-    "@storybook/blocks": "^8.6.0",
-    "@storybook/manager-api": "^8.6.0",
-    "@storybook/test": "^8.6.0",
-    "@storybook/test-runner": "^0.21.3",
-    "@storybook/theming": "^8.6.0",
-    "@storybook/vue3": "^8.6.0",
-    "@storybook/vue3-vite": "^8.6.0",
+    "@storybook/addon-a11y": "^8.6.4",
+    "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "^8.6.4",
+    "@storybook/vue3": "^8.6.4",
+    "@storybook/vue3-vite": "^8.6.4",
     "@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.10",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/coverage-v8": "^3.0.8",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "dayjs": "1.11.13",
-    "eslint": "^9.21.0",
-    "eslint-plugin-storybook": "^0.11.3",
+    "eslint": "^9.22.0",
+    "eslint-plugin-storybook": "^0.11.4",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
@@ -88,25 +88,25 @@
     "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.6.0",
+    "storybook": "^8.6.4",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8",
     "vue": "3.5.13",
     "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"
+    "tailwind-variants": "^1.0.0"
   }
 }

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

@@ -18,6 +18,7 @@ const ELEMENTS_MAP = {
 const DEFAULT_CLASSES_ARRAY = [
   'relative',
   'inline-block',
+  'whitespace-nowrap',
   'outline-none',
   'disabled:opacity-50',
   'disabled:cursor-default',
@@ -177,7 +178,7 @@ describe('PBtn.vue', () => {
     it.each([
       ['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-3', '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` } });
 
@@ -268,8 +269,6 @@ describe('PBtn.vue', () => {
 
       const icon = await wrapper.findComponent({ name: 'PIcon' });
 
-      console.log(icon.classes());
-
       expect(classes.every((c) => icon.classes().includes(c))).toBe(true);
     });
 

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

@@ -47,7 +47,7 @@ type Icon = InstanceType<typeof PIcon>['$props']['icon'];
 const btnClasses = {
   slots: {
     button:
-      'relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
+      'relative inline-block whitespace-nowrap rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
     content: 'flex items-center justify-center has-[.slot-wrapper:empty]:gap-0',
     loader: 'absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium',
     icon: 'shrink-0',
@@ -94,7 +94,7 @@ const btnClasses = {
         icon: 'text-xl',
       },
       lg: {
-        button: 'px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7',
+        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>