@pequity/squirrel 7.0.2 → 7.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {
@@ -39,7 +39,6 @@
   "peerDependencies": {
     "@tanstack/vue-virtual": "^3.8.3",
     "@vuepic/vue-datepicker": "^11.0.1",
-    "dayjs": "^1.11.12",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",
     "vue": "^3.4.33",
@@ -50,23 +49,23 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@pequity/eslint-config": "^1.1.1",
+    "@pequity/eslint-config": "^2.0.0",
     "@playwright/test": "^1.51.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@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/addon-a11y": "^8.6.6",
+    "@storybook/addon-actions": "^8.6.6",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-interactions": "^8.6.6",
+    "@storybook/addon-links": "^8.6.6",
+    "@storybook/blocks": "^8.6.6",
+    "@storybook/manager-api": "^8.6.6",
+    "@storybook/test": "^8.6.6",
     "@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",
+    "@storybook/theming": "^8.6.6",
+    "@storybook/vue3": "^8.6.6",
+    "@storybook/vue3-vite": "^8.6.6",
+    "@tanstack/vue-virtual": "3.13.4",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.13.10",
@@ -76,7 +75,6 @@
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.21",
-    "dayjs": "1.11.13",
     "eslint": "^9.22.0",
     "eslint-plugin-storybook": "^0.11.4",
     "floating-vue": "5.2.2",
@@ -84,7 +82,7 @@
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.4.3",
+    "lint-staged": "^15.5.0",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.3",
@@ -94,11 +92,11 @@
     "rimraf": "^6.0.1",
     "sass": "^1.85.1",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.6.4",
+    "storybook": "^8.6.6",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.7.3",
-    "vite": "^6.2.1",
+    "typescript": "5.8.2",
+    "vite": "^6.2.2",
     "vitest": "^3.0.8",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
@@ -108,5 +106,10 @@
   },
   "dependencies": {
     "tailwind-variants": "^1.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "typescript": "5.8.2"
+    }
   }
 }

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

@@ -2,6 +2,7 @@ import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { createWrapperFor } from '@tests/vitest.helpers';
 import { describe } from 'vitest';
+import { ref } from 'vue';
 
 vi.mock('@squirrel/utils/sanitization', () => {
   return {
@@ -109,43 +110,40 @@ describe('PBtn.vue', () => {
       expect(button.text()).toContain(`This is a button`);
     });
 
-    it.each([
-      ['button', undefined],
-      ['a', 'https://pequity.com/'],
-      ['a', { name: 'home', params: { id: 1 } }],
-    ])('gets disabled when the element is a %s and points to %s', async (el, to) => {
-      const wrapper = createWrapperFor(PBtn, {
-        props: {
-          to,
-        },
-        attrs: {
-          disabled: true,
-        },
-        global: {
-          stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
-        },
-      });
-
-      const button = await wrapper.find(el);
-
-      await button.trigger('click');
+    it.each(['https://pequity.com/', { name: 'home', params: { id: 1 } }])(
+      'gets disabled when the link points to %s',
+      async (to) => {
+        const wrapper = createWrapperFor(
+          {
+            template: `
+            <PBtn :disabled="disabled" :to="to" >Button</PBtn>
+            <button class="set-disabled" @click="disabled = true" :to="to">Set disabled</button>
+          `,
+            components: { PBtn },
+            setup() {
+              const disabled = ref(null);
+
+              return { disabled, to };
+            },
+          },
+          {
+            global: {
+              stubs: { RouterLink: { template: '<a class="router-link-stub"><slot /></a>' } },
+            },
+          }
+        );
 
-      if (el === 'button') {
-        expect(wrapper.emitted().click).toBeFalsy();
-      }
-      expect(button.attributes()).toHaveProperty('disabled');
-      expect(button.attributes()['aria-disabled']).toBe('true');
+        const pBtn = await wrapper.findComponent({ name: 'PBtn' });
 
-      await wrapper.setProps({ disabled: false });
+        expect(pBtn.attributes()).not.toHaveProperty('disabled');
+        expect(pBtn.attributes()['aria-disabled']).toBe('false');
 
-      await button.trigger('click');
+        await wrapper.find('.set-disabled').trigger('click');
 
-      if (el === 'button') {
-        expect(wrapper.emitted().click[0][0] instanceof MouseEvent).toBe(true);
+        expect(pBtn.attributes().disabled).toBe('true');
+        expect(pBtn.attributes()['aria-disabled']).toBe('true');
       }
-      expect(button.attributes()).not.toHaveProperty('disabled');
-      expect(button.attributes()['aria-disabled']).toBe('false');
-    });
+    );
 
     it('has a loading state', async () => {
       const wrapper = createWrapperFor(PBtn, {
@@ -257,7 +255,7 @@ describe('PBtn.vue', () => {
 
   describe('icon button', () => {
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with icon of size %s', async (size, classes) => {
@@ -273,7 +271,7 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5']],
       ['md', ['shrink-0', 'text-xl']],
       ['lg', ['shrink-0', 'text-2xl']],
     ])('renders a button with a right icon of size %s', async (size, classes) => {
@@ -289,7 +287,7 @@ describe('PBtn.vue', () => {
     });
 
     it.each([
-      ['sm', ['shrink-0', 'text-[20px]'], ['has-[.slot-wrapper:empty]:px-1.5']],
+      ['sm', ['shrink-0', 'text-base', 'p-0.5'], ['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) => {

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

@@ -1,26 +1,5 @@
 <template>
-  <a
-    v-if="typeof to === 'string' && isExternalLink(to)"
-    v-bind="$attrs"
-    :href="sanitizeUrl(to)"
-    target="_blank"
-    :class="classes.button"
-    :disabled="!!$attrs.disabled ? true : null"
-    :aria-disabled="!!$attrs.disabled"
-  >
-    <slot></slot>
-  </a>
-  <Component
-    :is="to ? 'RouterLink' : 'button'"
-    v-else
-    :type="to ? null : nativeType"
-    :to="to ? to : null"
-    :aria-selected="selected"
-    :class="classes.button"
-    v-bind="$attrs"
-    :disabled="!!$attrs.disabled || loading ? true : null"
-    :aria-disabled="$attrs.disabled"
-  >
+  <Component :is="isExternal ? 'a' : to ? 'RouterLink' : 'button'" v-bind="btnAttrs" :class="classes.button">
     <div :class="[{ invisible: loading }, classes.content]">
       <PIcon v-if="icon" :icon="icon" :class="classes.icon" />
       <span class="slot-wrapper empty:hidden">
@@ -28,7 +7,7 @@
       </span>
       <PIcon v-if="iconRight" :icon="iconRight" :class="classes.icon" />
     </div>
-    <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
+    <PRingLoader v-if="loading" :size="LOADER_SIZES[props.size]" :class="classes.loader" />
   </Component>
 </template>
 
@@ -39,7 +18,7 @@ import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { computed, type PropType } from 'vue';
+import { computed, type PropType, useAttrs } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
 type Icon = InstanceType<typeof PIcon>['$props']['icon'];
@@ -86,7 +65,7 @@ const btnClasses = {
       sm: {
         button: 'px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5',
         content: 'gap-1',
-        icon: 'text-[20px]',
+        icon: 'text-base p-0.5',
       },
       md: {
         button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base',
@@ -119,9 +98,10 @@ type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
 <script setup lang="ts">
 defineOptions({
   name: 'PBtn',
-  inheritAttrs: false,
 });
 
+const attrs = useAttrs();
+
 const props = defineProps({
   /**
    * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
@@ -197,7 +177,23 @@ const classes = computed(() => {
   return { button: button(), content: content(), loader: loader(), icon: icon() };
 });
 
-const loaderSize = computed(() => {
-  return Number(`${LOADER_SIZES[props.size]}`);
+const isExternal = computed(() => isExternalLink(String(props.to)));
+
+const btnAttrs = computed(() => {
+  const res: Record<string, unknown> = {
+    target: isExternal.value ? '_blank' : null,
+    to: !isExternal.value && props.to ? props.to : null,
+    type: props.to ? null : props.nativeType,
+    disabled: attrs.disabled || props.loading ? '' : null,
+    'aria-selected': !isExternal.value ? props.selected : false,
+    'aria-disabled': attrs.disabled || props.loading,
+  };
+
+  // We need to add the href attribute conditionally so that it doesn't override the RouterLink's href
+  if (isExternal.value) {
+    res.href = sanitizeUrl(String(props.to));
+  }
+
+  return res;
 });
 </script>

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

@@ -37,7 +37,6 @@ export default defineComponent({
     items: {
       type: Array,
       default: () => [],
-      required: true,
     },
     itemText: {
       type: String,

package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js

@@ -764,6 +764,16 @@ describe('PDropdownSelect.vue', () => {
       cleanup(wrapper);
     });
 
+    it('shows "Type to add" message when creatable is true and no search term', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(0));
+      const wrapper = createWrapper({ selected: null, items: [] }, { searchable: true, creatable: true });
+      await wrapper.find('button').trigger('click');
+      await sleep(200);
+      const noItemsMessage = wrapper.find('div.flex.items-center.justify-center.h-10.text-base');
+      expect(noItemsMessage.text()).toBe('No items found. Type to add');
+      cleanup(wrapper);
+    });
+
     it('does not show create option when creatable is false', async () => {
       useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
       const wrapper = createWrapper({ selected: null }, { searchable: true, creatable: false });

package/squirrel/components/p-dropdown-select/p-dropdown-select.vue

@@ -160,6 +160,7 @@
                     Add '{{ search }}'
                   </button>
                 </template>
+                <template v-else-if="creatable">No items found. Type to add</template>
                 <template v-else>No items found</template>
               </div>
             </slot>

package/squirrel/components/p-icon/p-icon.types.ts

@@ -33,6 +33,7 @@ export const P_ICON_ALIASES = {
   download: 'tdesign:download',
   upload: 'tdesign:upload',
   info: 'streamline:information-circle',
+  search: 'streamline:magnifying-glass-solid',
 } as const;
 
 export type PIconAlias = keyof typeof P_ICON_ALIASES;

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

@@ -8,12 +8,12 @@ describe('PInputSearch.vue', () => {
     const input = await wrapper.find('input');
     const button = wrapper.find('button.cursor-pointer');
     const icons = wrapper.findAll('i');
-    const searchIcon = wrapper.find('i.search');
+    const searchIcon = wrapper.findComponent({ name: 'PIcon' });
     const enterIcon = wrapper.find('i.enter');
 
     expect(input.exists()).toBe(true);
     expect(button.exists()).toBe(false);
-    expect(icons.length).toBe(1);
+    expect(icons.length).toBe(0);
     expect(searchIcon.exists()).toBe(true);
     expect(enterIcon.exists()).toBe(false);
   });
@@ -78,7 +78,7 @@ describe('PInputSearch.vue', () => {
     const icons = await wrapper.findAll('i');
     const enterIcon = wrapper.find('i.enter.v-popper--has-tooltip');
 
-    expect(icons.length).toBe(2);
+    expect(icons.length).toBe(1);
     expect(enterIcon.exists()).toBe(true);
   });
 });

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

@@ -1,7 +1,7 @@
 <template>
   <PInput
     ref="searchInput"
-    v-model="query"
+    v-model="model"
     :size="size"
     v-bind="$attrs"
     role="searchbox"
@@ -11,95 +11,83 @@
     @keydown.enter="keydownEnter"
   >
     <template #prefix>
-      <i class="icon absolute bg-no-repeat outline-none" :class="searchIconClasses"></i>
+      <PIcon icon="search" class="absolute text-p-gray-40" :class="searchIconClasses[size]" />
     </template>
     <template #suffix>
       <i
-        v-if="query && showEnterIcon && showEnterIconOnFocus"
+        v-if="model && showEnterIcon && showEnterIconOnFocus"
         v-tooltip.bottom="{ content: 'Press enter to search', delay: { show: 100, hide: 0 } }"
         class="icon absolute bg-no-repeat outline-none"
         :class="enterIconClasses"
       ></i>
       <button
-        v-if="query"
+        v-if="model"
         role="button"
         aria-label="Clear search input"
         class="icon absolute cursor-pointer bg-no-repeat"
         :class="clearIconClasses"
         @click="clearSearch"
-      />
+      ></button>
     </template>
   </PInput>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInput from '@squirrel/components/p-input/p-input.vue';
-import { defineComponent, type PropType } from 'vue';
+import { computed, type PropType, ref, useTemplateRef } from 'vue';
 
 type PInputInstance = InstanceType<typeof PInput>;
 
-export default defineComponent({
+const searchIconClasses = {
+  sm: 'text-xs top-2.5 left-2',
+  md: 'text-base top-3 left-3',
+  lg: 'text-lg top-4 left-5',
+} as const;
+
+defineOptions({
   name: 'PInputSearch',
-  components: {
-    PInput,
-  },
   inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    showEnterIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue', 'enter'],
-  data() {
-    return {
-      query: this.modelValue,
-      showEnterIconOnFocus: false,
-    };
-  },
-  computed: {
-    searchIconClasses() {
-      return `search search-${this.size}`;
-    },
-    enterIconClasses() {
-      return `enter enter-${this.size}`;
-    },
-    clearIconClasses() {
-      return `clear clear-${this.size}`;
-    },
-  },
-  watch: {
-    modelValue(value) {
-      this.query = value;
-    },
-    query(value) {
-      this.$emit('update:modelValue', value);
+});
+
+const model = defineModel<string>({ default: '' });
+const showEnterIconOnFocus = ref(false);
+const searchInput = useTemplateRef<PInputInstance>('searchInput');
+
+const emit = defineEmits<{
+  enter: [value: string];
+}>();
+
+const props = defineProps({
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
-  methods: {
-    clearSearch() {
-      this.query = '';
-      requestAnimationFrame(() => {
-        (this.$refs.searchInput as PInputInstance)?.$el.querySelector('input').focus();
-      });
-    },
-    keydownEnter() {
-      this.$emit('enter', this.query);
-    },
+  showEnterIcon: {
+    type: Boolean,
+    default: false,
   },
 });
+
+const enterIconClasses = computed(() => `enter enter-${props.size}`);
+
+const clearIconClasses = computed(() => `clear clear-${props.size}`);
+
+const clearSearch = () => {
+  model.value = '';
+
+  requestAnimationFrame(() => {
+    searchInput.value?.$el.querySelector('input').focus();
+  });
+};
+
+const keydownEnter = () => {
+  emit('enter', model.value);
+};
 </script>
 
 <style scoped lang="scss">
@@ -132,30 +120,6 @@ export default defineComponent({
 .icon.clear:hover {
   background-image: url('@squirrel/assets/clear-input-hovered.svg');
 }
-.icon.search {
-  background-image: url('@squirrel/assets/magnifying-glass.svg');
-}
-.icon.search-sm {
-  background-size: 0.75rem 0.75rem;
-  left: 0.5rem;
-  bottom: 0.625rem;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.icon.search-md {
-  background-size: 1rem 1rem;
-  width: 1rem;
-  height: 1rem;
-  left: 0.75rem;
-  bottom: 0.75rem;
-}
-.icon.search-lg {
-  background-size: 1rem 1rem;
-  width: 1rem;
-  height: 1rem;
-  left: 1.125rem;
-  bottom: 1rem;
-}
 .icon.enter {
   background-image: url('@squirrel/assets/keyboard-press-enter.svg');
 }

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

@@ -10,7 +10,7 @@
         :size="size"
         type="secondary-outline-blue"
         :disabled="item.disabled"
-        :icon="String(item.icon)"
+        :icon="item.icon ? String(item.icon) : ''"
         :class="{
           'rounded-none': index !== 0 && index !== items.length - 1 && items.length > 1,
           'rounded-br-none rounded-tr-none': index === 0 && items.length > 1,

package/squirrel/assets/magnifying-glass.svg

@@ -1,10 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_9127_330342)">
-<path d="M11.705 10.295L9.38501 8.00004C10.0193 7.0497 10.3178 5.91467 10.2331 4.77526C10.1484 3.63584 9.68546 2.5574 8.91771 1.71124C8.14996 0.86508 7.12147 0.299735 5.99563 0.105014C4.8698 -0.0897079 3.71117 0.0973621 2.70383 0.636506C1.69648 1.17565 0.898177 2.03595 0.435738 3.08073C-0.0267015 4.12552 -0.126757 5.29487 0.151467 6.40303C0.429691 7.51119 1.07024 8.4946 1.97135 9.19704C2.87246 9.89948 3.98246 10.2807 5.12501 10.28C6.13901 10.2811 7.13002 9.97801 7.97001 9.41004L10.295 11.735C10.4824 11.9213 10.7358 12.0258 11 12.0258C11.2642 12.0258 11.5176 11.9213 11.705 11.735C11.8018 11.6418 11.8788 11.5299 11.9314 11.4062C11.9839 11.2825 12.011 11.1495 12.011 11.015C12.011 10.8806 11.9839 10.7476 11.9314 10.6239C11.8788 10.5002 11.8018 10.3883 11.705 10.295ZM5.12501 1.50004C5.84176 1.50004 6.54241 1.71251 7.13843 2.11061C7.73445 2.50871 8.19908 3.07456 8.47359 3.73666C8.74811 4.39875 8.82019 5.12736 8.68072 5.8304C8.54125 6.53345 8.1965 7.17937 7.69004 7.68653C7.18357 8.19369 6.53813 8.53934 5.83527 8.67977C5.13242 8.82021 4.40371 8.74913 3.74125 8.47553C3.07878 8.20193 2.51228 7.73808 2.11336 7.14261C1.71444 6.54714 1.501 5.84678 1.50001 5.13004C1.50001 4.16817 1.88177 3.24562 2.56145 2.565C3.24112 1.88439 4.16314 1.50136 5.12501 1.50004Z" fill="#718096"/>
-</g>
-<defs>
-<clipPath id="clip0_9127_330342">
-<rect width="12" height="12" fill="white"/>
-</clipPath>
-</defs>
-</svg>