@pequity/squirrel 11.0.2 → 11.0.3

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

@@ -79,7 +79,6 @@ describe('PTable.vue', () => {
 
     cols.forEach((col) => {
       const th = wrapper.find(`th[data-col-id="${col.id}"]`);
-      const containerDiv = th.find('div.relative');
       const headerCell = th.find('div.header-cell-stub');
       const showFilterIcon = col.filterable || col.sortable;
 
@@ -90,12 +89,15 @@ describe('PTable.vue', () => {
       expect(headerCell.classes()).toContain('header-cell-class');
       expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
       expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+    });
 
-      if (!col.borderColor) {
-        ['border-b', 'border-p-gray-30'].forEach((className) => {
-          expect(containerDiv.classes()).toContain(className);
-        });
-      }
+    // Check border classes only for columns without custom borderColor
+    const colsWithoutBorder = cols.filter((col) => !col.borderColor);
+    colsWithoutBorder.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      expect(containerDiv.classes()).toContain('border-b');
+      expect(containerDiv.classes()).toContain('border-p-gray-30');
     });
 
     data.forEach((row, i) => {
@@ -132,7 +134,6 @@ describe('PTable.vue', () => {
 
     cols.forEach((col) => {
       const th = wrapper.find(`th[data-col-id="${col.id}"]`);
-      const containerDiv = th.find('div.relative');
       const headerCell = th.find('div.header-cell-stub');
       const showFilterIcon = col.filterable || col.sortable;
 
@@ -143,12 +144,15 @@ describe('PTable.vue', () => {
       expect(headerCell.classes()).toContain('header-cell-class');
       expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
       expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+    });
 
-      if (!col.borderColor) {
-        ['border-b', 'border-p-gray-30'].forEach((className) => {
-          expect(containerDiv.classes()).toContain(className);
-        });
-      }
+    // Check border classes only for columns without custom borderColor
+    const colsWithoutBorder = cols.filter((col) => !col.borderColor);
+    colsWithoutBorder.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      expect(containerDiv.classes()).toContain('border-b');
+      expect(containerDiv.classes()).toContain('border-p-gray-30');
     });
 
     data.forEach((row, i) => {
@@ -185,7 +189,6 @@ describe('PTable.vue', () => {
 
     cols.forEach((col) => {
       const th = wrapper.find(`th[data-col-id="${col.id}"]`);
-      const containerDiv = th.find('div.relative');
       const headerCell = th.find('div.header-cell-stub');
       const showFilterIcon = col.filterable || col.sortable;
 
@@ -196,12 +199,15 @@ describe('PTable.vue', () => {
       expect(headerCell.classes()).toContain('header-cell-class');
       expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
       expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+    });
 
-      if (!col.borderColor) {
-        ['border-b', 'border-p-gray-30'].forEach((className) => {
-          expect(containerDiv.classes()).toContain(className);
-        });
-      }
+    // Check border classes only for columns without custom borderColor
+    const colsWithoutBorder = cols.filter((col) => !col.borderColor);
+    colsWithoutBorder.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      expect(containerDiv.classes()).toContain('border-b');
+      expect(containerDiv.classes()).toContain('border-p-gray-30');
     });
 
     data.forEach((row, i) => {
@@ -212,12 +218,13 @@ describe('PTable.vue', () => {
 
       cols.forEach((col, j) => {
         const innerDiv = tds[j].find('div');
-        if (col.name === 'Third column') {
-          expect(innerDiv.text()).toBe('Constant Cell Content');
-        } else {
-          expect(innerDiv.text()).toBe(row[col.name]);
-          expect(innerDiv.classes()).toContain('py-2');
-        }
+        const isThirdColumn = col.name === 'Third column';
+        const expectedText = isThirdColumn ? 'Constant Cell Content' : row[col.name];
+        expect(innerDiv.text()).toBe(expectedText);
+
+        // Only check py-2 class for non-third-column cells
+        const hasPy2Class = innerDiv.classes().includes('py-2');
+        expect(hasPy2Class).toBe(!isThirdColumn);
       });
     });
   });
@@ -242,7 +249,6 @@ describe('PTable.vue', () => {
 
     cols.forEach((col) => {
       const th = wrapper.find(`th[data-col-id="${col.id}"]`);
-      const containerDiv = th.find('div.relative');
       const headerCell = th.find('div.header-cell-stub');
       const showFilterIcon = col.filterable || col.sortable;
 
@@ -254,15 +260,18 @@ describe('PTable.vue', () => {
       expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
       expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
 
-      if (col.name === 'Second column') {
-        expect(th.find('div.prepend').exists()).toBe(true);
-      }
+      // Check prepend div for second column
+      const isSecondColumn = col.name === 'Second column';
+      expect(th.find('div.prepend').exists()).toBe(isSecondColumn);
+    });
 
-      if (!col.borderColor) {
-        ['border-b', 'border-p-gray-30'].forEach((className) => {
-          expect(containerDiv.classes()).toContain(className);
-        });
-      }
+    // Check border classes only for columns without custom borderColor
+    const colsWithoutBorder = cols.filter((col) => !col.borderColor);
+    colsWithoutBorder.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      expect(containerDiv.classes()).toContain('border-b');
+      expect(containerDiv.classes()).toContain('border-p-gray-30');
     });
   });
 
@@ -276,13 +285,12 @@ describe('PTable.vue', () => {
       const th = wrapper.find(`th[data-col-id="${col.id}"]`);
       const containerDiv = th.find('div.relative');
 
-      if (i === 0 || i === cols.length - 1) {
-        ['th-shadow', 'px-4'].forEach((className) => {
-          expect(containerDiv.classes()).toContain(className);
-        });
-      } else {
-        expect(containerDiv.classes()).toContain('px-2');
-      }
+      const isFirstOrLast = i === 0 || i === cols.length - 1;
+
+      // Check classes based on position
+      expect(containerDiv.classes().includes('th-shadow')).toBe(isFirstOrLast);
+      expect(containerDiv.classes().includes('px-4')).toBe(isFirstOrLast);
+      expect(containerDiv.classes().includes('px-2')).toBe(!isFirstOrLast);
     });
   });
 
@@ -399,9 +407,8 @@ describe('PTable.vue', () => {
     // Check subheader classes include th-shadow for fixed columns
     cols.forEach((col, i) => {
       const subheaderDiv = wrapper.find(`th[data-col-id="${col.id}"] > div:last-child`);
-      if (i === 0 || i === cols.length - 1) {
-        expect(subheaderDiv.classes()).toContain('th-shadow');
-      }
+      const isFirstOrLast = i === 0 || i === cols.length - 1;
+      expect(subheaderDiv.classes().includes('th-shadow')).toBe(isFirstOrLast);
     });
   });
 

package/squirrel/components/p-tabs-pills/p-tabs-pills.spec.js

@@ -104,14 +104,16 @@ describe('PTabsPills.vue', () => {
 
     const buttons = await wrapper.findAll('button');
 
-    buttons.forEach((button, i) => {
-      if (i === 2) {
-        expect(button.element.disabled).toBe(true);
-        expect(button.classes()).toContain('text-p-gray-30');
-      } else {
-        expect(button.element.disabled).toBe(false);
-        expect(button.classes()).not.toContain('text-p-gray-30');
-      }
+    // Test the disabled button
+    const disabledButton = buttons[2];
+    expect(disabledButton.element.disabled).toBe(true);
+    expect(disabledButton.classes()).toContain('text-p-gray-30');
+
+    // Test the enabled buttons
+    const enabledButtons = buttons.filter((_, i) => i !== 2);
+    enabledButtons.forEach((button) => {
+      expect(button.element.disabled).toBe(false);
+      expect(button.classes()).not.toContain('text-p-gray-30');
     });
   });
 });

package/squirrel/locales/de-DE.json

@@ -0,0 +1,47 @@
+{
+  "squirrel": {
+    "close": "Schließen",
+    "action_bar_clear_all": "Alle löschen",
+    "select_list_items": "{count} Element | {count} Elemente",
+    "select_list_select_all": "Alle auswählen",
+    "select_list_select_all_filtered": "Alle gefilterten auswählen",
+    "select_list_clear_all": "Alle löschen",
+    "select_list_no_items_found": "Keine Elemente gefunden",
+    "dropdown_select_aria_label": "Dropdown-Auswahl",
+    "dropdown_select_remove_item": "Element entfernen",
+    "dropdown_select_clear_selection": "Auswahl löschen",
+    "dropdown_select_all_options_selected": "Alle Optionen ausgewählt",
+    "dropdown_select_options": "Option | Optionen",
+    "dropdown_select_selected": "ausgewählt",
+    "dropdown_select_items": "@:squirrel.select_list_items",
+    "dropdown_select_select_all": "@:squirrel.select_list_select_all",
+    "dropdown_select_select_all_filtered": "@:squirrel.select_list_select_all_filtered",
+    "dropdown_select_clear_all": "@:squirrel.select_list_clear_all",
+    "dropdown_select_add": "Hinzufügen",
+    "dropdown_select_no_items_found_type_to_add": "Keine Elemente gefunden. Tippen Sie zum Hinzufügen",
+    "dropdown_select_no_items_found": "@:squirrel.select_list_no_items_found",
+    "file_upload_dropzone": "Ablagebereich",
+    "file_upload_drag_or_select": "Ziehen oder {select}",
+    "file_upload_drop": "{fileWord} ablegen",
+    "file_upload_max": "Max. {count}",
+    "file_upload_one": "Eine",
+    "file_upload_files": "Datei | Dateien",
+    "file_upload_select": "{fileWord} auswählen",
+    "file_upload_with_size_less_than": "mit einer Größe unter {maxSize} | mit einer Größe unter {maxSize} jeweils",
+    "file_upload_max_files_exceeded": "Sie können maximal {count} {fileWord} hochladen.",
+    "file_upload_files_not_allowed": "{extension}-Dateien sind nicht erlaubt.",
+    "file_upload_file_size_exceeded": "Die Dateigröße von {fileName} überschreitet {maxSize}.",
+    "input_search_press_enter_to_search": "Drücken Sie die Eingabetaste zum Suchen",
+    "input_search_clear_search_input": "Sucheingabe löschen",
+    "pagination_go_to_previous_page": "zur vorherigen Seite gehen",
+    "pagination_go_to_page": "zu Seite {page} gehen",
+    "pagination_go_to_next_page": "zur nächsten Seite gehen",
+    "pagination_info_showing_results": "Zeige {from} bis {to} von {count} Ergebnissen",
+    "pagination_info_no_results_found": "Keine Ergebnisse gefunden",
+    "table_sort_sort": "SORTIEREN",
+    "table_sort_clear": "Löschen",
+    "table_sort_sort_ascending": "Aufsteigend sortieren",
+    "table_sort_sort_descending": "Absteigend sortieren",
+    "tabs_pills_aria_label": "Tab-Pillen"
+  }
+}

package/squirrel/locales/es-ES.json

@@ -0,0 +1,47 @@
+{
+  "squirrel": {
+    "close": "Cerrar",
+    "action_bar_clear_all": "Borrar todo",
+    "select_list_items": "{count} elemento | {count} elementos",
+    "select_list_select_all": "Seleccionar todo",
+    "select_list_select_all_filtered": "Seleccionar todo (filtrado)",
+    "select_list_clear_all": "Borrar todo",
+    "select_list_no_items_found": "No se encontraron elementos",
+    "dropdown_select_aria_label": "Selección desplegable",
+    "dropdown_select_remove_item": "Eliminar elemento",
+    "dropdown_select_clear_selection": "Borrar selección",
+    "dropdown_select_all_options_selected": "Todas las opciones seleccionadas",
+    "dropdown_select_options": "opción | opciones",
+    "dropdown_select_selected": "seleccionado",
+    "dropdown_select_items": "@:squirrel.select_list_items",
+    "dropdown_select_select_all": "@:squirrel.select_list_select_all",
+    "dropdown_select_select_all_filtered": "@:squirrel.select_list_select_all_filtered",
+    "dropdown_select_clear_all": "@:squirrel.select_list_clear_all",
+    "dropdown_select_add": "Agregar",
+    "dropdown_select_no_items_found_type_to_add": "No se encontraron elementos. Escriba para agregar",
+    "dropdown_select_no_items_found": "@:squirrel.select_list_no_items_found",
+    "file_upload_dropzone": "zona de carga",
+    "file_upload_drag_or_select": "Arrastre o {select}",
+    "file_upload_drop": "Soltar {fileWord}",
+    "file_upload_max": "Máx. {count}",
+    "file_upload_one": "Uno",
+    "file_upload_files": "archivo | archivos",
+    "file_upload_select": "seleccionar {fileWord}",
+    "file_upload_with_size_less_than": "con tamaño menor que {maxSize} | con tamaño menor que {maxSize} cada uno",
+    "file_upload_max_files_exceeded": "Solo puede cargar un máximo de {count} {fileWord}.",
+    "file_upload_files_not_allowed": "Los archivos {extension} no están permitidos.",
+    "file_upload_file_size_exceeded": "El tamaño del archivo {fileName} excede {maxSize}.",
+    "input_search_press_enter_to_search": "Presione Enter para buscar",
+    "input_search_clear_search_input": "Borrar entrada de búsqueda",
+    "pagination_go_to_previous_page": "ir a la página anterior",
+    "pagination_go_to_page": "ir a la página {page}",
+    "pagination_go_to_next_page": "ir a la página siguiente",
+    "pagination_info_showing_results": "Mostrando {from} a {to} de {count} resultados",
+    "pagination_info_no_results_found": "No se encontraron resultados",
+    "table_sort_sort": "ORDENAR",
+    "table_sort_clear": "Borrar",
+    "table_sort_sort_ascending": "Ordenar ascendente",
+    "table_sort_sort_descending": "Ordenar descendente",
+    "tabs_pills_aria_label": "Pestañas de píldoras"
+  }
+}

package/squirrel/plugin/index.spec.ts

@@ -1,4 +1,6 @@
+import deDE from '@squirrel/locales/de-DE.json';
 import enUS from '@squirrel/locales/en-US.json';
+import esES from '@squirrel/locales/es-ES.json';
 import frFR from '@squirrel/locales/fr-FR.json';
 import { SquirrelPlugin } from '@squirrel/plugin/index';
 import { type App, createApp, nextTick, ref } from 'vue';
@@ -64,12 +66,30 @@ describe('SquirrelPlugin', () => {
     expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('fr-FR', frFR);
   });
 
-  it('should not merge messages for unsupported locales', async () => {
+  it('should merge de-DE messages when locale is de-DE', async () => {
+    mockI18n = createMockI18n('de-DE', { 'de-DE': {} });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('de-DE', deDE);
+  });
+
+  it('should merge es-ES messages when locale is es-ES', async () => {
     mockI18n = createMockI18n('es-ES', { 'es-ES': {} });
     app.use(SquirrelPlugin, mockI18n);
 
     await nextTick();
 
+    expect(mockI18n.global.mergeLocaleMessage).toHaveBeenCalledWith('es-ES', esES);
+  });
+
+  it('should not merge messages for unsupported locales', async () => {
+    mockI18n = createMockI18n('pt-BR', { 'pt-BR': {} });
+    app.use(SquirrelPlugin, mockI18n);
+
+    await nextTick();
+
     expect(mockI18n.global.mergeLocaleMessage).not.toHaveBeenCalled();
   });
 
@@ -105,9 +125,9 @@ describe('SquirrelPlugin', () => {
   });
 
   it('should stop watching when all Squirrel locales are available', async () => {
-    // Create mock with both locales available initially
-    mockI18n = createMockI18n('en-US', { 'en-US': {}, 'fr-FR': {} });
-    mockI18n.global.availableLocales = ['en-US', 'fr-FR'];
+    // Create mock with all locales available initially
+    mockI18n = createMockI18n('en-US', { 'de-DE': {}, 'en-US': {}, 'es-ES': {}, 'fr-FR': {} });
+    mockI18n.global.availableLocales = ['de-DE', 'en-US', 'es-ES', 'fr-FR'];
 
     app.use(SquirrelPlugin, mockI18n);
 

package/squirrel/plugin/index.ts

@@ -1,4 +1,6 @@
+import deDE from '@squirrel/locales/de-DE.json';
 import enUS from '@squirrel/locales/en-US.json';
+import esES from '@squirrel/locales/es-ES.json';
 import frFR from '@squirrel/locales/fr-FR.json';
 import { type App, nextTick, type Plugin, watchEffect } from 'vue';
 
@@ -12,7 +14,9 @@ type I18nInstance = {
 };
 
 const squirrelMessages = {
+  'de-DE': deDE,
   'en-US': enUS,
+  'es-ES': esES,
   'fr-FR': frFR,
 } as const;
 

package/squirrel/utils/dateLocale.spec.ts

@@ -1,10 +1,12 @@
 import { getDateFnsLocale } from '@squirrel/utils/dateLocale';
-import { enUS, fr } from 'date-fns/locale';
+import { de, enUS, es, fr } from 'date-fns/locale';
 
 describe('getDateFnsLocale', () => {
   it('should return correct locale for valid codes', () => {
-    expect(getDateFnsLocale('fr-FR')).toBe(fr);
+    expect(getDateFnsLocale('de-DE')).toBe(de);
     expect(getDateFnsLocale('en-US')).toBe(enUS);
+    expect(getDateFnsLocale('es-ES')).toBe(es);
+    expect(getDateFnsLocale('fr-FR')).toBe(fr);
   });
 
   it('should return enUS as fallback for invalid locale codes', () => {
@@ -14,6 +16,8 @@ describe('getDateFnsLocale', () => {
   });
 
   it('should be case-sensitive', () => {
+    expect(getDateFnsLocale('DE-DE')).toBe(enUS);
+    expect(getDateFnsLocale('de-de')).toBe(enUS);
     expect(getDateFnsLocale('FR-FR')).toBe(enUS);
     expect(getDateFnsLocale('fr-fr')).toBe(enUS);
   });

package/squirrel/utils/dateLocale.ts

@@ -1,16 +1,20 @@
 import type { Locale } from 'date-fns';
+import { de } from 'date-fns/locale/de';
 import { enUS } from 'date-fns/locale/en-US';
+import { es } from 'date-fns/locale/es';
 import { fr } from 'date-fns/locale/fr';
 
 /**
  * Maps vue-i18n locale codes to date-fns Locale objects.
  *
- * @param localeCode - The locale code from vue-i18n (e.g., 'en-US', 'fr-FR')
+ * @param localeCode - The locale code from vue-i18n (e.g., 'en-US', 'de-DE', 'es-ES', 'fr-FR')
  * @returns The corresponding date-fns Locale object
  */
 const localeMap = {
-  'fr-FR': fr,
+  'de-DE': de,
   'en-US': enUS,
+  'es-ES': es,
+  'fr-FR': fr,
 } as const;
 
 const isValidLocaleCode = (code: string): code is keyof typeof localeMap => code in localeMap;