@dile/crud 2.10.0 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.18.0",
+    "@dile/ui": "^3.18.2",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1b065736666cc26f8afc1106ec7ffc98feaec60e"
+  "gitHead": "b59afd879d78118d5ea1cdc53e144f1a84628f13"
 }

package/components/action/src/DileCrudSingleActions.spec.js

@@ -1,126 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import { html, LitElement } from 'lit';
-import { DileForm } from '@dile/ui/mixins/form';
-import '../crud-single-actions.js';
-
-// Create a test form component that extends DileForm
-class TestActionForm extends DileForm(LitElement) {
-  render() {
-    return html`
-      <input name="productUuid" />
-      <input name="units" type="number" value="1" />
-    `;
-  }
-}
-
-if (!customElements.get('test-action-form')) {
-  customElements.define('test-action-form', TestActionForm);
-}
-
-describe('DileCrudSingleActions with triggerAction', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  const testActions = [
-    {
-      name: 'CreateInvoiceAction',
-      label: 'Create Invoice',
-      destructive: false,
-    },
-  ];
-
-  function createFormTemplate(selection) {
-    return (selection, element) => html`
-      ${selection === 'CreateInvoiceAction'
-        ? html`<test-action-form action="CreateInvoiceAction"></test-action-form>`
-        : ''
-      }
-    `;
-  }
-
-  async function createSingleActions() {
-    const el = document.createElement('dile-crud-single-actions');
-    el.actions = testActions;
-    el.directSingleActions = [];
-    el.formActionsTemplate = createFormTemplate(testActions[0].name);
-    el.actionIds = [1];
-    el.element = { id: 1, name: 'Test Item' };
-    el.endpoint = 'https://example.test/api';
-    el.language = 'en';
-    document.body.appendChild(el);
-    await el.updateComplete;
-    return el;
-  }
-
-  async function waitForForm(el, maxWait = 2000) {
-    const startTime = Date.now();
-    while (Date.now() - startTime < maxWait) {
-      const form = el.selectedActionForm;
-      if (form) {
-        await form.updateComplete;
-        return form;
-      }
-      await new Promise(r => setTimeout(r, 50));
-    }
-    return null;
-  }
-
-  it('triggerAction with initialData sets form values', async () => {
-    const el = await createSingleActions();
-    
-    const initialData = { productUuid: 'uuid-123', units: '5' };
-    el.triggerAction('CreateInvoiceAction', initialData);
-    
-    const form = await waitForForm(el);
-    expect(form).toBeTruthy();
-    
-    const productInput = form.shadowRoot.querySelector('[name="productUuid"]');
-    const unitsInput = form.shadowRoot.querySelector('[name="units"]');
-    
-    expect(productInput.value).toBe('uuid-123');
-    expect(unitsInput.value).toBe('5');
-  });
-
-  it('triggerAction without initialData resets form to empty', async () => {
-    const el = await createSingleActions();
-    
-    // First open with initial data
-    el.triggerAction('CreateInvoiceAction', { productUuid: 'uuid-old', units: '10' });
-    let form = await waitForForm(el);
-    expect(form.shadowRoot.querySelector('[name="productUuid"]').value).toBe('uuid-old');
-    
-    // Close the dialog
-    const confirm = el.confirmElement;
-    confirm.close();
-    await new Promise(r => setTimeout(r, 100));
-    
-    // Open again without initial data - should reset
-    el.triggerAction('CreateInvoiceAction');
-    form = await waitForForm(el);
-    
-    // Form should be empty after reset
-    expect(form.shadowRoot.querySelector('[name="productUuid"]').value).toBe('');
-  });
-
-  it('triggerAction opens confirm dialog', async () => {
-    const el = await createSingleActions();
-    
-    el.triggerAction('CreateInvoiceAction');
-    await waitForForm(el);
-    
-    const confirm = el.confirmElement;
-    expect(confirm).toBeTruthy();
-  });
-
-  it('initialData is cleared after being applied', async () => {
-    const el = await createSingleActions();
-    
-    el.triggerAction('CreateInvoiceAction', { productUuid: 'uuid-first' });
-    await waitForForm(el);
-    
-    // _initialData should be null after being used
-    expect(el._initialData).toBeNull();
-  });
-});
-

package/components/ajax/ajax.spec.js

@@ -1,35 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './ajax.js';
-
-describe('dile-ajax', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('appends arrays of files as multiple "key[]" entries when sending data as FormData', async () => {
-    const el = document.createElement('dile-ajax');
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    const files = [new File(['a'], 'a.txt'), new File(['b'], 'b.txt')];
-    el.data = { title: 'Docs', files, empty: null };
-    el._prepareFormData();
-
-    expect(el.formData.get('title')).toBe('Docs');
-    expect(el.formData.getAll('files[]').map(file => file.name)).toEqual(['a.txt', 'b.txt']);
-    expect(el.formData.has('files')).toBe(false);
-    expect(el.formData.has('empty')).toBe(false);
-  });
-
-  it('keeps sending other arrays as a single entry', async () => {
-    const el = document.createElement('dile-ajax');
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    el.data = { tags: [1, 2, 3] };
-    el._prepareFormData();
-
-    expect(el.formData.get('tags')).toBe('1,2,3');
-    expect(el.formData.has('tags[]')).toBe(false);
-  });
-});

package/components/ajax-select-crud/ajax-select-crud-overlay.spec.js

@@ -1,186 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import './ajax-select-crud-overlay.js';
-
-describe('dile-ajax-select-crud-overlay', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-    delete window.axiosInstance;
-  });
-
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  function mockAxios(responseData) {
-    const get = vi.fn(() => Promise.resolve({ status: 200, data: responseData }));
-    window.axiosInstance = { get };
-    return get;
-  }
-
-  async function renderCrudSelect(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-ajax-select-crud-overlay');
-    await el.updateComplete;
-    return el;
-  }
-
-  async function typeKeyword(el, keyword) {
-    const input = el.shadowRoot.getElementById('search');
-    input.value = keyword;
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await wait(el.delay + 50);
-    await el.updateComplete;
-  }
-
-  describe('Rendering', () => {
-    it('renders the search input, same as dile-select-ajax-overlay', async () => {
-      mockAxios([]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name"></dile-ajax-select-crud-overlay>
-      `);
-
-      const input = el.shadowRoot.getElementById('search');
-      expect(input).toBeTruthy();
-      expect(input.getAttribute('role')).toBe('combobox');
-    });
-  });
-
-  describe('Uses axios instead of fetch', () => {
-    it('requests through window.axiosInstance.get, not the native fetch API', async () => {
-      const get = mockAxios([{ id: 1, name: 'Spain' }]);
-      const fetchSpy = vi.spyOn(window, 'fetch');
-
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-
-      await typeKeyword(el, 'sp');
-
-      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp' } });
-      expect(fetchSpy).not.toHaveBeenCalled();
-      expect(el.data.length).toBe(1);
-      expect(el.select.opened).toBe(true);
-
-      fetchSpy.mockRestore();
-    });
-
-    it('fetches the initial value display text through axios', async () => {
-      // searchValueInitial() passes response.data (i.e. the "data" envelope, not the raw
-      // response) down to registerText(), matching dile-ajax-select-crud's own convention.
-      const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: { name: 'Spain' } } }));
-      window.axiosInstance = { get };
-
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" value="22"></dile-ajax-select-crud-overlay>
-      `);
-      await wait(50);
-      await el.updateComplete;
-
-      expect(get).toHaveBeenCalledWith('/api/countries/22');
-      expect(el.selectedText).toBe('Spain');
-      expect(el.isSelected).toBe(true);
-    });
-  });
-
-  describe('Selecting a result (no extra click required)', () => {
-    it('opens the popup as soon as results load and lets the user pick without a second click', async () => {
-      mockAxios([{ id: 1, name: 'Spain' }, { id: 2, name: 'France' }]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-
-      await typeKeyword(el, 'sp');
-      expect(el.select.opened).toBe(true);
-
-      const options = el.select.shadowRoot.querySelectorAll('[role="option"]');
-      options[0].click();
-      await el.select.updateComplete;
-      await el.updateComplete;
-
-      expect(el.value).toBe('1');
-      expect(el.selectedText).toBe('Spain');
-      expect(el.isSelected).toBe(true);
-    });
-  });
-
-  describe('maxResults / pageParamName', () => {
-    it('adds the page-size param to the request when both are set', async () => {
-      const get = mockAxios([]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" maxResults="5" pageParamName="limit" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-
-      await typeKeyword(el, 'sp');
-
-      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp', limit: 5 } });
-    });
-
-    it('omits the page-size param when pageParamName is not set', async () => {
-      const get = mockAxios([]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" maxResults="5" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-
-      await typeKeyword(el, 'sp');
-
-      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp' } });
-    });
-  });
-
-  describe('getSelectResultList', () => {
-    it('uses getSelectResultList to extract the list when the response shape needs adapting', async () => {
-      mockAxios({ data: { result: { data: [{ id: 1, name: 'Spain' }] } } });
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-      el.getSelectResultList = (response) => response.data.result.data;
-
-      await typeKeyword(el, 'sp');
-
-      expect(el.data).toEqual([{ id: 1, name: 'Spain' }]);
-    });
-
-    it('takes priority over resultDataProperty when both are set', async () => {
-      mockAxios({ items: [{ id: 1, name: 'Spain' }], data: [] });
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" resultDataProperty="data" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-      el.getSelectResultList = (response) => response.items;
-
-      await typeKeyword(el, 'sp');
-
-      expect(el.data).toEqual([{ id: 1, name: 'Spain' }]);
-    });
-  });
-
-  describe('Icons (inherited from dile-select-ajax-overlay)', () => {
-    it('propagates iconProperty and icon to data-icon on the generated options/select', async () => {
-      mockAxios([
-        { id: 1, name: 'Spain' },
-        { id: 2, name: 'France', iconName: 'material.star' },
-      ]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" iconProperty="iconName" icon="lucide.globe" delay="10"></dile-ajax-select-crud-overlay>
-      `);
-
-      await typeKeyword(el, 'sp');
-
-      const options = el.select.options;
-      // Spain has no iconName of its own, so it falls back to the select-level default.
-      expect(options[0].icon).toBe('lucide.globe');
-      // France declares its own icon via iconProperty, which takes precedence.
-      expect(options[1].icon).toBe('material.star');
-    });
-  });
-
-  describe('Form Association', () => {
-    it('is form-associated, same as dile-select-ajax-overlay', async () => {
-      mockAxios([]);
-      const el = await renderCrudSelect(`
-        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name"></dile-ajax-select-crud-overlay>
-      `);
-
-      expect(el.internals).toBeTruthy();
-    });
-  });
-});