@pequity/squirrel 10.0.3 → 10.1.0

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

@@ -18,15 +18,29 @@ const createMockedKbdNavigationSvc = () => {
   };
 };
 
-const Popper = {
-  template: `<div class="popper"><slot /></div>`,
-};
+const createVDropdownStub = (options = {}) => {
+  const { popperMethods = {} } = options;
 
-const PopperContent = {
-  template: `<div class="popper-content"><slot /></div>`,
-};
+  const Popper = {
+    template: '<div class="popper"><slot /></div>',
+    data() {
+      return {
+        isShown: false,
+        $_referenceNode: null,
+      };
+    },
+    methods: {
+      hide: vi.fn(),
+      $_detachPopperNode: vi.fn(),
+      $emit: vi.fn(),
+      ...popperMethods,
+    },
+  };
+
+  const PopperContent = {
+    template: '<div class="popper-content"><slot /></div>',
+  };
 
-const createVDropdownStub = () => {
   return {
     template: `
       <div ref="vPopper">
@@ -38,10 +52,7 @@ const createVDropdownStub = () => {
         </PopperContent>
       </div>
     `,
-    components: {
-      Popper,
-      PopperContent,
-    },
+    components: { Popper, PopperContent },
     mounted() {
       this.$emit('show');
     },
@@ -51,26 +62,40 @@ const createVDropdownStub = () => {
   };
 };
 
+const createWrapper = (options = {}) => {
+  const { props = {}, slots = {}, attrs = {}, global = {}, stubOptions = {}, ...wrapperOptions } = options;
+
+  return createWrapperFor(PDropdown, {
+    props: {
+      enableArrowNavigation: false,
+      enableCloseOnEsc: false,
+      ...props,
+    },
+    slots: {
+      default: '<button>Open popper</button>',
+      popper: '<div>Dropdown content</div>',
+      ...slots,
+    },
+    attrs,
+    global: {
+      stubs: {
+        VDropdown: createVDropdownStub(stubOptions),
+      },
+      ...global,
+    },
+    ...wrapperOptions,
+  });
+};
+
 describe('PDropdown.vue', () => {
   it('renders correctly', async () => {
-    const wrapper = createWrapperFor(PDropdown, {
+    const wrapper = createWrapper({
       props: {
-        enableArrowNavigation: false,
-        enableCloseOnEsc: false,
         triggerStyle: {
           width: '200px',
           display: 'flex',
         },
       },
-      slots: {
-        default: `<button>Open popper</button>`,
-        popper: `<div>Dropdown content</div>`,
-      },
-      global: {
-        stubs: {
-          VDropdown: createVDropdownStub(),
-        },
-      },
     });
 
     const popper = wrapper.find('.popper');
@@ -82,21 +107,7 @@ describe('PDropdown.vue', () => {
   });
 
   it(`sets the correct defaults`, async () => {
-    const wrapper = createWrapperFor(PDropdown, {
-      props: {
-        enableArrowNavigation: false,
-        enableCloseOnEsc: false,
-      },
-      slots: {
-        default: `<button>Open popper</button>`,
-        popper: `<div>Dropdown content</div>`,
-      },
-      global: {
-        stubs: {
-          VDropdown: createVDropdownStub(),
-        },
-      },
-    });
+    const wrapper = createWrapper();
 
     const res = {
       triggers: 'click',
@@ -115,19 +126,9 @@ describe('PDropdown.vue', () => {
   it('initializes the keyboard navigation svc', async () => {
     setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
 
-    createWrapperFor(PDropdown, {
+    createWrapper({
       props: {
         enableArrowNavigation: true,
-        enableCloseOnEsc: false,
-      },
-      slots: {
-        default: `<button>Open popper</button>`,
-        popper: `<div>Dropdown content</div>`,
-      },
-      global: {
-        stubs: {
-          VDropdown: createVDropdownStub(),
-        },
       },
     });
 
@@ -137,24 +138,220 @@ describe('PDropdown.vue', () => {
   it('destroys the keyboard navigation svc', async () => {
     setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
 
-    const wrapper = createWrapperFor(PDropdown, {
+    const wrapper = createWrapper({
       props: {
         enableArrowNavigation: true,
-        enableCloseOnEsc: false,
       },
+    });
+
+    wrapper.unmount();
+
+    expect(destroyFn).toHaveBeenCalled();
+  });
+
+  it.each([
+    [true, 'enables'],
+    [false, 'disables'],
+  ])('%s arrow navigation when enableArrowNavigation is %s', async (enableArrowNavigation, description) => {
+    setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
+
+    createWrapper({
+      props: {
+        enableArrowNavigation,
+      },
+    });
+
+    if (enableArrowNavigation) {
+      expect(setupListKeyboardNavigation).toHaveBeenCalledTimes(1);
+    } else {
+      expect(setupListKeyboardNavigation).not.toHaveBeenCalled();
+    }
+  });
+
+  it('handles escape key when enableCloseOnEsc is true', async () => {
+    const mockHide = vi.fn();
+
+    const wrapper = createWrapper({
+      props: {
+        enableCloseOnEsc: true,
+      },
+      stubOptions: {
+        popperMethods: { hide: mockHide },
+      },
+    });
+
+    // Simulate escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+    document.dispatchEvent(escapeEvent);
+
+    expect(mockHide).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('does not handle escape key when enableCloseOnEsc is false', async () => {
+    const mockHide = vi.fn();
+
+    const wrapper = createWrapper({
+      stubOptions: {
+        popperMethods: { hide: mockHide },
+      },
+    });
+
+    // Simulate escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+    document.dispatchEvent(escapeEvent);
+
+    expect(mockHide).not.toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('applies custom trigger styles', async () => {
+    const customStyle = {
+      width: '300px',
+      height: '50px',
+      backgroundColor: 'red',
+    };
+
+    const wrapper = createWrapper({
+      props: {
+        triggerStyle: customStyle,
+      },
+      slots: {
+        default: '<button>Custom styled trigger</button>',
+      },
+    });
+
+    const popper = wrapper.find('.popper');
+
+    expect(popper.attributes().style).toBe('width: 300px; height: 50px; background-color: red;');
+
+    wrapper.unmount();
+  });
+
+  it('uses default trigger style when not provided', async () => {
+    const wrapper = createWrapper({
       slots: {
-        default: `<button>Open popper</button>`,
-        popper: `<div>Dropdown content</div>`,
+        default: '<button>Default styled trigger</button>',
+      },
+    });
+
+    const popper = wrapper.find('.popper');
+
+    expect(popper.attributes().style).toBe('display: inline-block;');
+
+    wrapper.unmount();
+  });
+
+  it('reinitializes keyboard navigation on subsequent shows', async () => {
+    setupListKeyboardNavigation.mockImplementation(() => createMockedKbdNavigationSvc());
+
+    const createMultiShowStub = () => ({
+      template: `
+        <div ref="vPopper">
+          <Popper ref="popper">
+            <slot />
+          </Popper>
+          <PopperContent ref="popperContent">
+            <slot name="popper" />
+          </PopperContent>
+        </div>
+      `,
+      components: {
+        Popper: { template: '<div class="popper"><slot /></div>' },
+        PopperContent: { template: '<div class="popper-content"><slot /></div>' },
+      },
+      mounted() {
+        // Simulate multiple show events
+        this.$emit('show');
+        this.$emit('show');
+      },
+      beforeUnmount() {
+        this.$emit('hide');
+      },
+    });
+
+    createWrapper({
+      props: {
+        enableArrowNavigation: true,
       },
       global: {
         stubs: {
-          VDropdown: createVDropdownStub(),
+          VDropdown: createMultiShowStub(),
         },
       },
     });
 
+    // First call creates the service, second call calls init
+    expect(setupListKeyboardNavigation).toHaveBeenCalledTimes(1);
+    expect(initFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates reference element correctly', async () => {
+    const mockDetachPopperNode = vi.fn();
+    const mockEmit = vi.fn();
+
+    const wrapper = createWrapper({
+      stubOptions: {
+        popperMethods: {
+          $_detachPopperNode: mockDetachPopperNode,
+          $emit: mockEmit,
+        },
+      },
+    });
+
+    const newReference = document.createElement('button');
+    newReference.textContent = 'New reference';
+
+    // Should not throw error when updating reference
+    await expect(wrapper.vm.updateReference(newReference)).resolves.toBeUndefined();
+
+    expect(mockDetachPopperNode).toHaveBeenCalled();
+
     wrapper.unmount();
+  });
 
-    expect(destroyFn).toHaveBeenCalled();
+  it('throws error when updateReference is called with invalid reference', async () => {
+    const wrapper = createWrapper();
+
+    // Should throw error when reference is null/undefined
+    await expect(wrapper.vm.updateReference(null)).rejects.toThrow('Reference element is required');
+    await expect(wrapper.vm.updateReference(undefined)).rejects.toThrow('Reference element is required');
+
+    wrapper.unmount();
+  });
+
+  it('forwards all attributes to VDropdown component', async () => {
+    const wrapper = createWrapper({
+      attrs: {
+        'data-testid': 'custom-dropdown',
+        'aria-label': 'Custom dropdown menu',
+        'custom-prop': 'custom-value',
+      },
+    });
+
+    // Check that custom attributes are forwarded along with defaults
+    expect(wrapper.attributes()['data-testid']).toBe('custom-dropdown');
+    expect(wrapper.attributes()['aria-label']).toBe('Custom dropdown menu');
+    expect(wrapper.attributes()['custom-prop']).toBe('custom-value');
+
+    wrapper.unmount();
+  });
+
+  it('properly handles slot forwarding to VDropdown', async () => {
+    const wrapper = createWrapper({
+      slots: {
+        default: '<button class="trigger-button">Trigger Content</button>',
+        popper: '<div class="popper-content-test">Popper Content</div>',
+      },
+    });
+
+    expect(wrapper.find('.trigger-button').exists()).toBe(true);
+    expect(wrapper.find('.trigger-button').text()).toBe('Trigger Content');
+    expect(wrapper.find('.popper-content-test').exists()).toBe(true);
+    expect(wrapper.find('.popper-content-test').text()).toBe('Popper Content');
+
+    wrapper.unmount();
   });
 });

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

@@ -4,7 +4,7 @@
     :class="[{ hidden: $attrs.hidden }, $attrs.class]"
     :data-has-error="!!errorMsg"
     :style="style"
-    aria-label="Dropdown select"
+    :aria-label="$t('squirrel.dropdown_select_aria_label')"
   >
     <label v-if="label" :class="labelClasses">{{ label }}</label>
     <PDropdown
@@ -48,7 +48,7 @@
               <button
                 type="button"
                 class="flex items-center justify-center text-p-gray-40 hover:text-p-gray-60"
-                aria-label="Remove item"
+                :aria-label="$t('squirrel.dropdown_select_remove_item')"
                 data-test="pill-remove"
                 @click.stop="select($event, item[itemValue])"
               >
@@ -60,8 +60,8 @@
             {{
               multiple
                 ? selectedItems.length === computedItems.length
-                  ? 'All options selected'
-                  : `${selectedItems.length} option${selectedItems.length > 1 ? 's' : ''} selected`
+                  ? $t('squirrel.dropdown_select_all_options_selected')
+                  : `${selectedItems.length} ${$t('squirrel.dropdown_select_options', selectedItems.length)} ${$t('squirrel.dropdown_select_selected')}`
                 : selectedItems[0][itemText]
             }}
           </div>
@@ -71,7 +71,7 @@
           v-if="clearable && selectedItems.length"
           class="absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60"
           :class="[CLEAR_BUTTON_SPACING[size]]"
-          aria-label="Clear selection"
+          :aria-label="$t('squirrel.dropdown_select_clear_selection')"
           @click.stop="clearAll"
         >
           <PIcon icon="fe:close" />
@@ -86,7 +86,9 @@
               ref="actionsContainer"
               class="flex flex-row justify-between text-xs font-semibold text-primary"
             >
-              <p class="text-p-purple-60">{{ computedItems.length }} items</p>
+              <p class="text-p-purple-60">
+                {{ $t('squirrel.dropdown_select_items', computedItems.length) }}
+              </p>
               <div class="flex flex-row">
                 <a
                   v-if="computedItems.length === internalItems.length"
@@ -95,21 +97,21 @@
                   ]"
                   @click="selectAll"
                 >
-                  Select all
+                  {{ $t('squirrel.dropdown_select_select_all') }}
                 </a>
                 <a
                   v-else
                   :class="[computedInsideSelected ? 'pointer-events-none opacity-50' : 'cursor-pointer']"
                   @click="selectAll"
                 >
-                  Select all filtered
+                  {{ $t('squirrel.dropdown_select_select_all_filtered') }}
                 </a>
                 <span class="px-1 leading-none">.</span>
                 <a
                   :class="[selectedItems.length ? 'cursor-pointer' : 'pointer-events-none opacity-50']"
                   @click="clearAll"
                 >
-                  Clear all
+                  {{ $t('squirrel.dropdown_select_clear_all') }}
                 </a>
               </div>
             </div>
@@ -184,11 +186,13 @@
                     @click="handleCreate"
                   >
                     <PIcon icon="fe:plus-circle" />
-                    Add '{{ search }}'
+                    {{ $t('squirrel.dropdown_select_add') }} '{{ search }}'
                   </button>
                 </template>
-                <template v-else-if="creatable">No items found. Type to add</template>
-                <template v-else>No items found</template>
+                <template v-else-if="creatable">
+                  {{ $t('squirrel.dropdown_select_no_items_found_type_to_add') }}
+                </template>
+                <template v-else>{{ $t('squirrel.dropdown_select_no_items_found') }}</template>
               </div>
             </slot>
           </div>

package/squirrel/components/p-file-upload/p-file-upload.spec.js

@@ -1,7 +1,6 @@
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
 import { expect } from 'storybook/test';
-import { vi } from 'vitest';
 
 // Mocking the toastification library
 const toastError = vi.fn();

package/squirrel/components/p-file-upload/p-file-upload.vue

@@ -10,7 +10,7 @@
         errorMsg ? 'border-on-error' : 'border-p-gray-40 hover:border-primary',
         { 'pointer-events-none opacity-50': disabled },
       ]"
-      aria-label="dropzone"
+      :aria-label="$t('squirrel.file_upload_dropzone')"
       @dragover.prevent.stop="isDraggingOver = true"
       @dragleave.prevent.stop="isDraggingOver = false"
       @drop.prevent.stop="onDrop"
@@ -20,12 +20,16 @@
         <div v-if="!isDraggingOver" class="flex flex-col items-center">
           <PIcon icon="upload" width="32" class="text-p-gray-50" />
           <div class="mt-2 text-p-gray-50">
-            Drag or <span class="text-p-blue-60">select {{ fileWord }}</span>
+            <I18nT keypath="squirrel.file_upload_drag_or_select" scope="global">
+              <template #select>
+                <span class="text-p-blue-60">{{ $t('squirrel.file_upload_select', { fileWord }) }}</span>
+              </template>
+            </I18nT>
           </div>
         </div>
         <div v-else class="flex flex-col items-center">
           <PIcon icon="tdesign:drag-drop" width="32" class="text-primary" />
-          <div class="mt-2 text-p-purple-60">Drop {{ fileWord }}</div>
+          <div class="mt-2 text-p-purple-60">{{ $t('squirrel.file_upload_drop', { fileWord }) }}</div>
         </div>
         <input
           ref="fileInputRef"
@@ -61,8 +65,15 @@
     <div v-show="errorMsg" :class="errorMsgClasses">{{ errorMsg }}</div>
     <!-- Info -->
     <div class="mt-1 text-xs text-p-gray-40">
-      {{ multiple ? `Max ${maxNumberOfFiles}` : 'One' }} {{ acceptFileTypes }} {{ multiple ? 'files' : 'file' }} with
-      size less than {{ formatBytes(maxSizeInBytes) }} {{ multiple ? 'each' : '' }}
+      {{ multiple ? $t('squirrel.file_upload_max', maxNumberOfFiles) : $t('squirrel.file_upload_one') }}
+      {{ acceptFileTypes }}
+      {{ $t('squirrel.file_upload_files', multiple ? 2 : 1) }}
+      {{
+        $t('squirrel.file_upload_with_size_less_than', {
+          count: multiple ? 2 : 1,
+          maxSize: formatBytes(maxSizeInBytes),
+        })
+      }}
     </div>
   </div>
 </template>
@@ -74,6 +85,7 @@ import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import { uniq } from 'lodash-es';
 import { computed, onMounted, type PropType, ref, shallowRef } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 
 /**
@@ -185,10 +197,11 @@ const emit = defineEmits<{
 const fileInputRef = shallowRef<HTMLInputElement>();
 const isDraggingOver = ref(false);
 const toast = useToast();
+const { t } = useI18n({ useScope: 'global' });
 const { labelClasses, errorMsgClasses } = useInputClasses(props);
 
 // Computed
-const fileWord = computed(() => (props.multiple ? 'files' : 'file'));
+const fileWord = computed(() => t('squirrel.file_upload_files', props.multiple ? 2 : 1));
 
 const files = computed<FileUploadFile[]>({
   get() {
@@ -223,7 +236,9 @@ const validateFiles = (filesToUpload: FileUploadFile[]) => {
     if (res.length + files.value.length >= props.maxNumberOfFiles) {
       // Show a toast - except for the contradictory config (multiple: true with maxNumberOfFiles: 1)
       if (!(props.multiple && props.maxNumberOfFiles === 1)) {
-        toast.error(`You can only upload a maximum of ${props.maxNumberOfFiles} ${fileWord.value}.`);
+        toast.error(
+          t('squirrel.file_upload_max_files_exceeded', { count: props.maxNumberOfFiles, fileWord: fileWord.value })
+        );
       }
 
       break;
@@ -248,14 +263,16 @@ const validateFiles = (filesToUpload: FileUploadFile[]) => {
       const isValidExtension = extension ? props.fileTypes.includes(extension) : false;
 
       if (!isValidExtension) {
-        toast.error(`${extension} files are not allowed.`);
+        toast.error(t('squirrel.file_upload_files_not_allowed', { extension }));
         continue;
       }
     }
 
     // Check filesize
     if ((file.size || 0) > props.maxSizeInBytes) {
-      toast.error(`File size of ${fileName} exceeds ${formatBytes(props.maxSizeInBytes)}.`);
+      toast.error(
+        t('squirrel.file_upload_file_size_exceeded', { fileName, maxSize: formatBytes(props.maxSizeInBytes) })
+      );
       continue;
     }
 

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue

@@ -14,6 +14,7 @@
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
 import VueDatePicker, { type VueDatePickerProps } from '@vuepic/vue-datepicker';
 import { computed, type StyleValue, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 /**
  * An inline date picker component that displays a calendar for date selection.
@@ -73,6 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
 const model = defineModel<Date | string | null>({ default: '' });
 
 // Data
+const { locale } = useI18n();
 const attrs = useAttrs();
 const { labelClasses, errorMsgClasses } = useInputClasses(props);
 
@@ -81,7 +83,7 @@ const datePickerProps = computed<VueDatePickerProps>(() => {
   const { modelValue: _, ...propsWithoutModelValue } = props;
   const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
 
-  return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle };
+  return { ...propsWithoutModelValue, ...attrsWithoutClassAndStyle, locale: locale.value };
 });
 
 const style = computed(() => {

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

@@ -16,14 +16,14 @@
     <template #suffix>
       <i
         v-if="query && showEnterIcon && showEnterIconOnFocus"
-        v-tooltip.bottom="{ content: 'Press enter to search', delay: { show: 100, hide: 0 } }"
+        v-tooltip.bottom="{ content: $t('squirrel.input_search_press_enter_to_search'), delay: { show: 100, hide: 0 } }"
         class="enter absolute bg-no-repeat outline-none"
         :class="enterIconClasses[size]"
       ></i>
       <button
         v-if="query"
         role="button"
-        aria-label="Clear search input"
+        :aria-label="$t('squirrel.input_search_clear_search_input')"
         class="absolute cursor-pointer"
         :class="clearIconClasses[size]"
         @click="clearSearch"

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

@@ -45,7 +45,7 @@
                   <PCloseBtn
                     :disabled="disabled"
                     :class="{ invisible: !enableClose }"
-                    :aria-label="closeLabel"
+                    :aria-label="closeLabel || $t('squirrel.close')"
                     @click.prevent="close"
                   />
                 </div>

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

@@ -3,7 +3,7 @@
   <div v-if="!loading && pages.length > 1" class="flex text-p-gray-40">
     <div
       :class="[BTN_CLASS, Number(modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]"
-      aria-label="go to the previous page"
+      :aria-label="$t('squirrel.pagination_go_to_previous_page')"
       @click="setPage(Number(modelValue) - 1)"
     >
       <PIcon icon="chevron-left" width="24px" />
@@ -13,7 +13,7 @@
         <div
           v-if="page !== DOTS"
           :class="[BTN_CLASS, page === modelValue ? BTN_ACTIVE_CLASS : BTN_INACTIVE_CLASS]"
-          :aria-label="`go to page ${page}`"
+          :aria-label="$t('squirrel.pagination_go_to_page', { page })"
         >
           {{ page }}
         </div>
@@ -22,7 +22,7 @@
     </div>
     <div
       :class="[BTN_CLASS, modelValue === pageCount ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]"
-      aria-label="go to the next page"
+      :aria-label="$t('squirrel.pagination_go_to_next_page')"
       @click="setPage(Number(modelValue) + 1)"
     >
       <PIcon icon="chevron-right" width="24px" />

package/squirrel/components/p-pagination-info/p-pagination-info.vue

@@ -1,8 +1,8 @@
 <template>
   <PSkeletonLoader v-if="loading" class="h-6 w-56" />
   <div v-else class="text-sm font-medium text-p-gray-40">
-    <template v-if="count">Showing {{ from }} to {{ to }} of {{ count }} results</template>
-    <slot v-else name="no-results">No results found</slot>
+    <template v-if="count">{{ $t('squirrel.pagination_info_showing_results', { from, to, count }) }}</template>
+    <slot v-else name="no-results">{{ $t('squirrel.pagination_info_no_results_found') }}</slot>
   </div>
 </template>