@zeedhi/common 3.0.6 → 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-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/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
+      }
+    },
+  },
+])

package/dist/types/components/index.d.ts

@@ -1,151 +0,0 @@
-export * from './zd-alert/alert';
-export * from './zd-alert/interfaces';
-export * from './zd-breadcrumbs/breadcrumbs';
-export * from './zd-breadcrumbs/interfaces';
-export * from './zd-badge/badge';
-export * from './zd-badge/interfaces';
-export * from './zd-button/button';
-export * from './zd-button/interfaces';
-export * from './zd-date-input/date-input';
-export * from './zd-date-input/interfaces';
-export * from './zd-divider/divider';
-export * from './zd-divider/interfaces';
-export * from './zd-main/interfaces';
-export * from './zd-main/main';
-export * from './zd-frame/frame';
-export * from './zd-frame/interfaces';
-export * from './zd-frame-page/frame-page';
-export * from './zd-frame-page/interfaces';
-export * from './zd-image/image';
-export * from './zd-image/interfaces';
-export * from './zd-iterable/column';
-export * from './zd-iterable/column-not-found';
-export * from './zd-iterable/interfaces';
-export * from './zd-iterable/iterable';
-export * from './zd-iterable/iterable-page-component';
-export * from './zd-iterable/iterable-page-info';
-export * from './zd-iterable/iterable-page-size';
-export * from './zd-iterable/iterable-pagination';
-export * from './zd-iterable/search';
-export * from './zd-iterable/conditions-manager';
-export * from './zd-iterable/iterable-columns-button';
-export * from './zd-iterable/iterable-columns-button-controller';
-export * from './zd-iterable-component-render/interfaces';
-export * from './zd-iterable-component-render/iterable-component-render';
-export * from './zd-header/header';
-export * from './zd-header/interfaces';
-export * from './zd-col/col';
-export * from './zd-col/interfaces';
-export * from './zd-layout/interfaces';
-export * from './zd-layout/layout';
-export * from './zd-loading/loading';
-export * from './zd-loading/interfaces';
-export * from './zd-login/login';
-export * from './zd-login/interfaces';
-export * from './zd-login/login-button';
-export * from './zd-menu/interfaces';
-export * from './zd-menu/menu';
-export * from './zd-menu/menu-button';
-export * from './zd-menu/menu-group';
-export * from './zd-menu/menu-link';
-export * from './zd-menu/menu-separator';
-export * from './zd-card/card';
-export * from './zd-card/interfaces';
-export * from './zd-collapse-card/collapse-card';
-export * from './zd-collapse-card/interfaces';
-export * from './zd-carousel/carousel';
-export * from './zd-carousel/interfaces';
-export * from './zd-table/interfaces';
-export * from './zd-table/table';
-export * from './zd-tabs/interfaces';
-export * from './zd-tabs/tab';
-export * from './zd-tabs/tab-not-found';
-export * from './zd-tabs/tabs';
-export * from './zd-tag/interfaces';
-export * from './zd-tag/tag';
-export * from './zd-text/interfaces';
-export * from './zd-text/text';
-export * from './zd-input/input';
-export * from './zd-input/interfaces';
-export * from './zd-input/input-factory';
-export * from './zd-icon/icon';
-export * from './zd-icon/interfaces';
-export * from './zd-text-input/interfaces';
-export * from './zd-text-input/text-input';
-export * from './zd-component/child-not-found';
-export * from './zd-component/component';
-export * from './zd-component/component-render';
-export * from './zd-component/interfaces';
-export * from './zd-container/container';
-export * from './zd-container/interfaces';
-export * from './zd-code-viewer/code-viewer';
-export * from './zd-code-viewer/interfaces';
-export * from './zd-radio/radio';
-export * from './zd-radio/interfaces';
-export * from './zd-row/interfaces';
-export * from './zd-row/row';
-export * from './zd-form/form';
-export * from './zd-form/interfaces';
-export * from './zd-footer/footer';
-export * from './zd-footer/interfaces';
-export * from './zd-textarea/textarea';
-export * from './zd-textarea/interfaces';
-export * from './zd-toggleable/toggleable';
-export * from './zd-toggleable/interfaces';
-export * from './zd-switch/switch';
-export * from './zd-switch/interfaces';
-export * from './zd-checkbox/checkbox';
-export * from './zd-checkbox/interfaces';
-export * from './zd-tooltip/tooltip';
-export * from './zd-tooltip/interfaces';
-export * from './zd-dropdown/dropdown';
-export * from './zd-dropdown/interfaces';
-export * from './zd-select/select';
-export * from './zd-select/interfaces';
-export * from './zd-select-multiple/select-multiple';
-export * from './zd-select-multiple/interfaces';
-export * from './zd-dropdown/dropdown';
-export * from './zd-dropdown/interfaces';
-export * from './zd-dialog/dialog';
-export * from './zd-dialog/interfaces';
-export * from './zd-password/password';
-export * from './zd-password/interfaces';
-export * from './zd-list/list';
-export * from './zd-list/list-item';
-export * from './zd-list/list-group';
-export * from './zd-list/interfaces';
-export * from './zd-modal/modal';
-export * from './zd-modal/modal-close-button';
-export * from './zd-modal/interfaces';
-export * from './zd-number-input/number-input';
-export * from './zd-number-input/interfaces';
-export * from './zd-grid';
-export * from './zd-grid-editable';
-export * from './zd-tree-grid';
-export * from './zd-checkbox-multiple/checkbox-multiple';
-export * from './zd-checkbox-multiple/interfaces';
-export * from './zd-chip/chip';
-export * from './zd-chip/interfaces';
-export * from './zd-progress/interfaces';
-export * from './zd-progress/progress';
-export * from './zd-button-group/button-group';
-export * from './zd-button-group/interfaces';
-export * from './zd-master-detail/detail-not-found';
-export * from './zd-master-detail/interfaces';
-export * from './zd-master-detail/master-detail';
-export * from './zd-master-detail/master-not-found';
-export * from './zd-svg-map/interfaces';
-export * from './zd-svg-map/svg-map';
-export * from './zd-tree/interfaces';
-export * from './zd-tree/tree';
-export * from './zd-increment/increment';
-export * from './zd-increment/interfaces';
-export * from './zd-currency/currency';
-export * from './zd-currency/interfaces';
-export * from './zd-month/interfaces';
-export * from './zd-month/month';
-export * from './zd-time/interfaces';
-export * from './zd-time/time';
-export * from './zd-time/time-format-selector';
-export * from './zd-date-range/interfaces';
-export * from './zd-date-range/date-range';