@zeedhi/common 3.0.5 → 3.0.7

package/tests/unit/components/zd-grid/grid-column.spec.ts

@@ -1,6 +1,6 @@
 import { init } from '@zeedhi/core';
 import { GridColumn } from '../../../../src';
-import { IDictionary } from 'packages/core/dist/types';
+import { IDictionary } from '@zeedhi/core';
 
 class SelectMultipleMock {
   datasource = {

package/tests/unit/components/zd-grid/grid.spec.ts

@@ -161,23 +161,36 @@ describe('Grid', () => {
       expect(instance.cellSelection).toBeTruthy();
     });
 
-    it('should create new grid with change default slot names', () => {
+    it('on slot creation, should replace <<NAME>> tags by the grid name', () => {
+      const fn = jest.fn();
       const instance = new Grid({
         name: 'Grid',
         component: 'ZdGrid',
         footerSlot: [
-          { name: 'iterablePagination', component: 'ZdIterablePagination' },
-          { name: 'iterablePageSize', component: 'ZdIterablePageSize' },
-          { name: 'iterablePageInfo', component: 'ZdIterablePageInfo' },
+          { name: 'pagination_<<NAME>>', component: 'ZdIterablePagination' },
         ],
-        toolbarSlot: [{ name: 'gridSearch', component: 'ZdSearch' }],
+        toolbarSlot: [{
+          name: 'gridSearch', component: 'ZdSearch', children: [{
+            name: 'deep_<<NAME>>',
+            component: 'ZdInput',
+            nullProp: null,
+            functionProp: fn,
+          }]
+        }],
       });
       expect(instance.footerSlot).toEqual([
-        { name: 'iterablePagination', component: 'ZdIterablePagination' },
-        { name: 'iterablePageSize', component: 'ZdIterablePageSize' },
-        { name: 'iterablePageInfo', component: 'ZdIterablePageInfo' },
+        { name: 'pagination_Grid', component: 'ZdIterablePagination' },
       ]);
-      expect(instance.toolbarSlot).toEqual([{ name: 'gridSearch', component: 'ZdSearch' }]);
+      expect(instance.toolbarSlot).toEqual([{
+        name: 'gridSearch', component: 'ZdSearch', children: [
+          {
+            name: 'deep_Grid',
+            component: 'ZdInput',
+            nullProp: null,
+            functionProp: fn,
+          },
+        ]
+      }]);
     });
 
     it('should not add action columns in datasource searchIn', () => {
@@ -385,7 +398,7 @@ describe('Grid', () => {
           cellClick: ({ column }: any) => { cellClicked = column.name; },
         },
       });
-			instance.onCreated();
+      instance.onCreated();
       const event = new MouseEvent('click');
       const element = document.createElement('div');
       instance.cellClick({ id: 1 }, instance.columns[0] as GridColumn, event, element);
@@ -1474,31 +1487,31 @@ describe('Grid', () => {
 
       expect(grid.getCurrentRowIndex()).toBe(0)
     })
-   })
-
-   describe('getColumn()', () => {
-     it('should return a column', () => {
-       const instance = new Grid({
-         name: 'iterable',
-         component: 'Iterable',
-         columns: [
-           { name: 'column', component: 'Column' },
-         ],
-       });
-       expect(instance.getColumn('column')).toBeInstanceOf(GridColumn);
-     });
- 
-     it('should throw an error if column does not exist', () => {
-       const instance = new Grid({
-         name: 'iterable',
-         component: 'Iterable',
-         columns: [
-           { name: 'column', component: 'Column' },
-         ],
-       });
-       expect(() => { instance.getColumn('column2'); }).toThrow();
-     });
-   });
+  })
+
+  describe('getColumn()', () => {
+    it('should return a column', () => {
+      const instance = new Grid({
+        name: 'iterable',
+        component: 'Iterable',
+        columns: [
+          { name: 'column', component: 'Column' },
+        ],
+      });
+      expect(instance.getColumn('column')).toBeInstanceOf(GridColumn);
+    });
+
+    it('should throw an error if column does not exist', () => {
+      const instance = new Grid({
+        name: 'iterable',
+        component: 'Iterable',
+        columns: [
+          { name: 'column', component: 'Column' },
+        ],
+      });
+      expect(() => { instance.getColumn('column2'); }).toThrow();
+    });
+  });
 
   describe('pageText', () => {
     it('should get paging info', () => {

package/tests/unit/components/zd-grid-editable/data-editor.spec.ts

@@ -192,7 +192,7 @@ describe('DataEditor', () => {
   });
 
   describe('updateRow', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+    const spy = jest.spyOn(console, 'warn');
 
     expect(spy).not.toHaveBeenCalled();
     expect(spy).toHaveBeenCalledTimes(0);

package/tests/unit/components/zd-grid-editable/grid-editable.spec.ts

@@ -813,7 +813,7 @@ describe('Grid Editable', () => {
         },
       );
 
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+      const consoleSpy = jest.spyOn(console, 'warn');
 
       const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
 

package/tests/unit/components/zd-iterable/column.spec.ts

@@ -162,8 +162,49 @@ describe('Column', () => {
 				.spyOn(Datasource.prototype, 'addFilter')
 				.mockImplementationOnce(async () => Promise.resolve([{ code: '2', name: 'name 2' }]));
 
+			const spyConsole = jest
+				.spyOn(console, 'warn')
+				.mockImplementationOnce(() => true);
+
+			const instance1 = new Column({
+				name: 'code',
+				componentProps: {
+					name: 'column',
+					component: 'ZdColumn',
+					datasource: {
+						data: [{ code: '1', name: 'name 1' }],
+					},
+				},
+			});
+			instance1.initialize();
+
+			expect(instance1.getLookupData('code', '1')).toEqual({ code: '1', name: 'name 1' });
+			expect(instance1.lookupData).toEqual({ 1: { code: '1', name: 'name 1' } });
+			expect(instance1.getLookupData('code', '1')).toEqual({ code: '1', name: 'name 1' });
+			expect(instance1.lookupData).toEqual({ 1: { code: '1', name: 'name 1' } });
+			expect(instance1.getLookupData('teste', '3')).toEqual({});
+			expect(instance1.lookupData).toEqual({ 1: { code: '1', name: 'name 1' }, 3: {} });
+			expect(instance1.getLookupData('code', '2')).toEqual({});
+
+			jest.runAllTimers();
+
+			expect(instance1.lookupData).toEqual({ 1: { code: '1', name: 'name 1' }, 2: {}, 3: {} });
+			spyDatasource.mockClear();
+			spyConsole.mockClear();
+		});
+
+		it('should return data using storeData', () => {
+			const spyDatasource = jest
+				.spyOn(Datasource.prototype, 'addFilter')
+				.mockImplementationOnce(async () => Promise.resolve([{ code: '2', name: 'name 2' }]));
+
+			const spyConsole = jest
+				.spyOn(console, 'warn')
+				.mockImplementationOnce(() => true);
+
 			const instance1 = new Column({
 				name: 'code',
+				storeData: false,
 				componentProps: {
 					name: 'column',
 					component: 'ZdColumn',
@@ -186,6 +227,7 @@ describe('Column', () => {
 
 			expect(instance1.lookupData).toEqual({ 1: { code: '1', name: 'name 1' }, 2: {}, 3: {} });
 			spyDatasource.mockClear();
+			spyConsole.mockClear();
 		});
 	});
 

package/tests/unit/components/zd-month/month.spec.ts

@@ -1,5 +1,4 @@
 import { Config, FormatterParserProvider } from '@zeedhi/core';
-import times from 'lodash.times';
 import { Month } from '../../../../src';
 
 const originalConfig = { ...Config };
@@ -53,232 +52,6 @@ describe('Month', () => {
     it('should return same value when date is invalid', () => {
       expect(instance.formatter('99-9999')).toBe('99-9999');
     });
-
-    it('when value is invalid and mask is set, should get same value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdMonth');
-
-      const formatted = formatterFn('01/20', {
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'YYYY-MM',
-        mask: '####/##',
-        initialMask: '####/##',
-      });
-
-      expect(formatted).toBe('01/20');
-    });
-
-    it('when value is valid and mask is set, should get masked value', () => {
-      const formatterFn = FormatterParserProvider.getFormatter('ZdMonth');
-
-      const formatted = formatterFn('12/2020', {
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'YYYY-MM',
-        mask: '##//####',
-        initialMask: '##//####',
-      });
-
-      expect(formatted).toBe('12//2020');
-    });
-  });
-
-  describe('displayValue', () => {
-    it('should return month formatted', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        displayFormat: 'MM/YYYY',
-      });
-      month.value = '02-2020';
-      expect(month.displayValue).toBe('02/2020');
-      month.displayValue = '02/2020';
-      expect(month.value).toBe('02-2020');
-      expect(month.dateValidation()).toBeTruthy();
-    });
-
-    it('should return month formatted when both day and month are less than 12', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        displayFormat: 'MM/YYYY',
-      });
-      month.value = '02-2020'; // MM-DD-YYYY
-      expect(month.displayValue).toBe('02/2020');
-      month.displayValue = '02/2020';
-      expect(month.value).toBe('02-2020');
-      expect(month.dateValidation()).toBeTruthy();
-
-      month.value = '02-2020'; // MM-DD-YYYY
-      expect(month.displayValue).toBe('02/2020');
-      month.displayValue = '02/2020';
-      expect(month.value).toBe('02-2020');
-      expect(month.dateValidation()).toBeTruthy();
-    });
-
-    it('when initial mask and complex displayFormat, should use mask on focus and use displayFormat on blur', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-        inputFormat: 'MM YYYY',
-      });
-      // set value directly
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12 2020');
-
-      // multiple blur/focus calls should not change behavior
-      times(2, () => {
-        month.blur(new Event('blur'), {});
-        expect(month.value).toBe('12/2020');
-        expect(month.displayValue).toBe('December 2020');
-
-        month.focus(new Event('focus'), {});
-        expect(month.value).toBe('12/2020');
-        expect(month.displayValue).toBe('December 2020');
-      });
-    });
-
-    it('when initial mask and complex displayFormat, should behave the same when setting via value/displayValue', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-        mask: '## ####',
-      });
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12 2020');
-
-      month.displayValue = '12 2020'; // DD MM YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12 2020');
-
-      month.blur(new Event('blur'), {});
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('December 2020');
-    });
-
-    it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MM/YYYY',
-        mask: '## ####',
-      });
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12 2020');
-
-      month.displayValue = '09 2020'; // MM YYYY
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('09 2020');
-
-      month.blur(new Event('blur'), {});
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('09/2020');
-    });
-
-    it('should display value with no delimiters', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMYYYY',
-        mask: '## ####',
-      });
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12 2020');
-
-      month.displayValue = '09 2020'; // MM YYYY
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('09 2020');
-
-      month.blur(new Event('blur'), {});
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('092020');
-    });
-
-    it('should not call change event if the value is the same', () => {
-      const changeFn = jest.fn();
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        displayFormat: 'DD/YYYY',
-        events: {
-          change: changeFn,
-        },
-      });
-
-      expect(changeFn).not.toHaveBeenCalled();
-      month.setDateValue('02/2020');
-      expect(changeFn).toHaveBeenCalled();
-      changeFn.mockClear();
-      month.setDateValue('02/2020');
-      expect(changeFn).not.toHaveBeenCalled();
-    });
-
-    it('should use inputFormat on focus and use displayFormat on blur', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-        inputFormat: 'MM/YY',
-      });
-      // set value directly
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12/20');
-
-      // multiple blur/focus calls should not change behavior
-      times(2, () => {
-        month.blur(new Event('blur'), {});
-        expect(month.value).toBe('12/2020');
-        expect(month.displayValue).toBe('December 2020');
-
-        month.focus(new Event('focus'), {});
-        expect(month.value).toBe('12/2020');
-        expect(month.displayValue).toBe('December 2020');
-      });
-    });
-
-    it('using inputFormat should behave the same when setting via value/displayValue', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-        inputFormat: 'MM/YYYY',
-      });
-      month.value = '12/2020'; // MM/YYYY
-      expect(month.value).toBe('12/2020');
-      expect(month.displayValue).toBe('12/2020');
-
-      month.displayValue = '09/2020'; // MM/YYYY
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('09/2020');
-
-      month.blur(new Event('blur'), {});
-      expect(month.value).toBe('09/2020');
-      expect(month.displayValue).toBe('September 2020');
-    });
-
-    it('using inputFormat, should not parse when value is invalid', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-        inputFormat: 'DD/YYYY',
-      });
-      month.displayValue = '09/1'; // MM/DD/YYYY
-      expect(month.value).toBe('09/1');
-      expect(month.displayValue).toBe('09/1');
-    });
   });
 
   describe('parser()', () => {
@@ -295,48 +68,6 @@ describe('Month', () => {
       expect(instance.parser('99/9999')).toBe('99/9999');
     });
 
-    it('when formatted value is masked, should remove mask and parse using displayFormat mask', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'ZdMonth',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'YYYY-MM',
-        mask: '####//##',
-      });
-
-      month.displayValue = '2019//12';
-
-      expect(month.value).toBe('12/2019');
-    });
-
-    it('when formatted value is masked and can\'t be masked using displayFmt mask, should parse using dateFmt mask', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'ZdMonth',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'YYYY MMMM',
-        mask: '##-####',
-      });
-
-      month.displayValue = '12-2019';
-
-      expect(month.value).toBe('12/2019');
-    });
-
-    it('when formatted value is masked and can\'t use neither displayFmt or dateFmt mask, should not parse', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'ZdMonth',
-        dateFormat: 'MMMM/YYYY',
-        displayFormat: 'YYYY MMMM',
-        mask: '##-####',
-      });
-
-      month.displayValue = '12-2019';
-
-      expect(month.value).toBe('12-2019');
-    });
-
     it('should use inputFormat', () => {
       const month = new Month({
         name: 'month',
@@ -345,6 +76,7 @@ describe('Month', () => {
         displayFormat: 'YYYY MMMM',
         inputFormat: 'MM-YYYY',
       });
+      month.focus(new Event('focus'), {});
       // set value directly
       month.value = 'December/2020'; // MMMM/YYYY
       expect(month.value).toBe('December/2020');
@@ -376,75 +108,16 @@ describe('Month', () => {
     Config.set(originalConfig);
   });
 
-  it('when initial mask is defined and simple displayFormat, should use displayFormat as mask fallback', () => {
+  it('should set displayValue on focus when inputFormat and valid value are set', () => {
     const month = new Month({
       name: 'month',
-      component: 'month',
+      component: 'Month',
       dateFormat: 'MM/YYYY',
-      displayFormat: 'MM/YYYY',
-      mask: '## ####',
+      inputFormat: 'MM-YYYY',
     });
-    month.value = '12/2020'; // MM/YYYY
-    expect(month.value).toBe('12/2020');
-    expect(month.displayValue).toBe('12 2020');
 
-    month.displayValue = '09 2020'; // DD MM YYYY
-    expect(month.value).toBe('09/2020');
-    expect(month.displayValue).toBe('09 2020');
-
-    month.blur(new Event('blur'), {});
-    expect(month.value).toBe('09/2020');
-    expect(month.displayValue).toBe('09/2020');
+    month.value = '12/2020';
+    month.focus(new Event('focus'), {});
+    expect(month.displayValue).toBe('12-2020');
   });
-
-  describe('updateMask', () => {
-    it('should use month mask', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'ZdMonth',
-        displayFormat: 'MMM-YYYY',
-      });
-
-      expect(month.updateMask()).toEqual('###-####');
-    });
-
-    it('should not replace string if displayFormat doesn\'t have MMM', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'ZdMonth',
-        displayFormat: 'MM-YYYY',
-      });
-
-      expect(month.updateMask()).toEqual('##-####');
-    });
-  });
-
-  describe('coverage for blur with MMMM', () => {
-    it('should set displayValue to long month name on blur when displayFormat is MMMM YYYY', () => {
-      const month = new Month({
-        name: 'month',
-        component: 'Month',
-        dateFormat: 'MM/YYYY',
-        displayFormat: 'MMMM YYYY',
-      });
-      month.value = '12/2020';
-      month.blur(new Event('blur'), {});
-      expect(month.displayValue).toBe('December 2020');
-    });
-  });
-
-it('should set displayValue on focus when inputFormat and valid value are set', () => {
-  const month = new Month({
-    name: 'month',
-    component: 'Month',
-    dateFormat: 'MM/YYYY',
-    inputFormat: 'MM-YYYY',
-  });
-
-  month.value = '12/2020';
-  month.focus(new Event('focus'), {});
-  expect(month.displayValue).toBe('12-2020');
-});
-
-
 });

package/tests/unit/components/zd-select/select.spec.ts

@@ -1,9 +1,8 @@
-import { DatasourceFactory, FormatterParserProvider, Loader, MemoryDatasource } from "@zeedhi/core";
+import { DatasourceFactory, FormatterParserProvider, IDictionary, Loader, MemoryDatasource } from "@zeedhi/core";
 import { ISelect, Select } from "../../../../src";
 import { flushPromises } from "../../__helpers__/flush-promises-helper";
 import { mockGetUsingData } from "../../__helpers__/mock-http-get-helper";
 import { setBlur, setFocus } from "../../__helpers__/component-event-helper";
-import { IDictionary } from "packages/core/dist/types";
 
 jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
 

package/tests/unit/utils/mock-console.ts

@@ -0,0 +1,18 @@
+const originalWarn = console.warn;
+const originalError = console.error;
+
+beforeAll(() => {
+  jest.spyOn(console, 'warn').mockImplementation((...args) => {
+    // Oculta apenas mensagens específicas
+    if (args.join(' ').includes('Duplicate component name detected')
+     || args.join(' ').includes('Row datasource do not have a key')
+     || args.join(' ').includes('Nenhum datasource foi passado para o componente')) return;
+    return originalWarn(...args);
+  });
+
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
+    // Oculta apenas mensagens específicas
+    if (args.join(' ').includes('Controller ') && args.join(' ').includes(' not found')) return;
+    return originalError(...args);
+  });
+});

package/tsdown.config.ts

@@ -0,0 +1,74 @@
+import { defineConfig } from 'tsdown';
+import postcss from 'rollup-plugin-postcss';
+import { rmSync } from 'fs';
+
+export default defineConfig([
+  // 1. ESM Library Build (for package managers/bundlers)
+  {
+    entry: {
+      'zd-common': './src/index.ts',
+    },
+    name: 'ZdCommon',
+    format: 'esm',
+    clean: true,        // Wipes dist/ before starting
+    dts: true,          // Generates .d.ts type definitions
+    minify: false,      // Keeps code readable for users debugging node_modules
+    outDir: 'dist',
+    outExtensions: () => ({ js: '.mjs' }),
+    external: ['@zeedhi/core'],
+  },
+
+  // 2. Browser Script Build (Minified IIFE for <script> tags)
+  {
+    entry: {
+      'zd-common': './src/index.ts',
+    },
+    name: 'ZdCommon',
+    format: 'iife',     // "Immediately Invoked Function Expression" - self-contained
+    clean: false,       // Don't wipe dist/ (so we don't delete the ESM build)
+    dts: false,         // Type definitions aren't needed for the minified script
+    minify: true,       // Minifies output for smaller file size
+    outDir: 'dist',
+
+    // bundle ALL dependencies in package.json
+    noExternal: [/(.*)/],
+
+    external: ['@zeedhi/core'],
+    outputOptions: {
+      globals: {
+        '@zeedhi/core': 'ZdCore',
+      },
+    },
+
+    platform: 'browser',
+
+    // global variable name, so users can access in the browser (e.g., window.ZdCommon)
+    globalName: 'ZdCommon', 
+    outExtensions: () => ({ js: '.min.js' }),
+  },
+
+  // 3. scss build
+  {
+    entry: {
+      'style.css': './src/styles/index.scss',
+    },
+    outDir: 'dist',
+    plugins: [
+      postcss({
+        // 1. Handle .scss files
+        extract: 'style.css', // Or true to generate a file based on entry name
+        minimize: true,             // Minify CSS
+        use: ['sass'],              // Tell it to use the sass compiler
+      }),
+    ],
+    onSuccess() {
+      try {
+        // Delete any generated .js or .mjs files from the SCSS entry
+        rmSync('dist/style.css.mjs', { force: true });
+        console.log('Cleaned up unwanted JS files from CSS build.');
+      } catch (error) {
+        // Files might not exist, which is fine
+      }
+    },
+  },
+])