umy-ui-table 1.2.4 → 1.2.6

package/packages/ux-grid/test/real-kernel-events.cjs

@@ -0,0 +1,233 @@
+// Real Vue/Element/OLD or NEW kernel and actual DOM dispatched events.
+// jsdom is not evidence of layout, resize or physical pointer hit testing.
+const assert = require('assert');
+const path = require('path');
+const root = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!root) throw Error('Set UX_GRID_TEST_DEPENDENCIES to the legacy consumer');
+const mode = process.argv[2];
+if (!mode) {
+  const results = {};
+  const traces = {};
+  for (const name of ['old', 'new']) {
+    const child = require('child_process').spawnSync(process.execPath, [__filename, name], { env: process.env, encoding: 'utf8' });
+    assert.equal(child.status, 0, name + '\n' + child.stdout + child.stderr);
+    results[name] = JSON.parse(child.stdout.split('\n').find(line => line.startsWith('RESULT ')).slice(7));
+    const timingLine = child.stdout.split('\n').find(line => line.startsWith('TIMING '));
+    assert(timingLine); traces[name] = JSON.parse(timingLine.slice(7));
+    console.log(name + ' ' + timingLine);
+    console.log(name + ' EVENTS ' + JSON.stringify(results[name]));
+  }
+  assert.deepStrictEqual(results.new, results.old);
+  for (const label of Object.keys(traces.old)) {
+    assert.deepStrictEqual(traces.new[label].filter(phase => phase !== 'nextTick'), traces.old[label].filter(phase => phase !== 'nextTick'), label + ' same event order relative to synchronous DOM dispatch return');
+  }
+  console.log('real-kernel DOM events passed');
+  process.exit(0);
+}
+const external = name => require(require.resolve(name, { paths: [root] }));
+require('babel-polyfill');
+const dom = new (external('jsdom').JSDOM)('<html><body><script></script></body></html>', { url: 'http://localhost/' });
+for (const key of ['window', 'document', 'Element', 'HTMLElement', 'HTMLTableElement', 'Node', 'MutationObserver', 'getComputedStyle', 'name', 'Image']) global[key] = dom.window[key];
+Object.defineProperty(global, 'navigator', { configurable: true, value: dom.window.navigator });
+global.requestAnimationFrame = cb => setTimeout(cb, 0);
+global.cancelAnimationFrame = clearTimeout;
+// jsdom has no layout engine and returns null for every offsetParent. The
+// legacy filter positioning assumes one exists; supply ancestry only, never
+// claim these zero-size DOM tests verify popup placement or scrolling.
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', { configurable: true, get() { return this.parentElement; } });
+const Vue = require('vue');
+for (const location of [root, require.resolve('vxe-table'), require.resolve('vxe-pc-ui')]) require.cache[require.resolve('vue', { paths: [location] })] = require.cache[require.resolve('vue')];
+Vue.config.productionTip = false; Vue.config.devtools = false;
+const errors = [];
+Vue.config.errorHandler = error => errors.push(error.stack || String(error));
+Vue.use(external('element-ui'));
+let Grid;
+if (mode === 'old') {
+  const old = external('umy-table/lib/umy-table.common.js'); Vue.use(old.default || old); Grid = Vue.options.components.UxGrid;
+} else { const current = require('../../../lib/ux-grid.js'); Grid = current.default || current; }
+const settle = () => new Promise(resolve => setTimeout(resolve, 80));
+const observations = {};
+const eventTiming = {};
+let vm;
+(async () => {
+  vm = new Vue({ data: () => ({ allowEdit: true }), render(h) { return h(Grid, { ref: 'grid', props: {
+    height: 300, data: [{ id: 1, name: 'One' }, { id: 2, name: 'Two' }], rowId: 'id',
+    paginationShow: true, total: 30, pageSize: 10, currentPage: 1, layout: 'prev,pager,next',
+    highlightCurrentRow: true,
+    editConfig: { mode: 'cell', trigger: 'click', activeMethod: () => this.allowEdit, beforeEditMethod: () => this.allowEdit },
+    columns: [{ type: 'checkbox' }, { type: 'expand' },
+      { field: 'id', title: 'ID', sortable: true, filters: [{ label: 'One', value: 1 }] },
+      { field: 'name', title: 'Name', filters: [{ label: 'One', value: 'One' }], editRender: { name: 'ElInput' } },
+      { field: 'hidden', visible: false, filters: [{ label: 'Hidden', value: 'hidden' }] }]
+  } }); } }).$mount();
+  document.body.appendChild(vm.$el); await settle();
+  const wrapper = vm.$refs.grid;
+  let emitted = []; let sequence = [];
+  const names = ['selection-change', 'select', 'select-all', 'cell-click', 'row-click', 'cell-dblclick', 'row-dblclick', 'row-contextmenu', 'header-click', 'header-contextmenu', 'sort-change', 'filter-change', 'edit-actived', 'edit-closed', 'edit-disabled', 'expand-change', 'current-change', 'radio-change', 'cell-mouse-enter', 'cell-mouse-leave'];
+  for (const name of names) wrapper.$on(name, (...args) => { emitted.push({ name, args }); sequence.push(name); });
+  async function dispatch(label, selector, type, expected) {
+    emitted = []; sequence = ['before-dispatch'];
+    const element = vm.$el.querySelector(selector);
+    assert(element, label + ': control ' + selector);
+    const domEvent = new window.MouseEvent(type, { bubbles: true, cancelable: true });
+    element.dispatchEvent(domEvent);
+    if (type === 'contextmenu') assert.equal(domEvent.defaultPrevented, false, 'empty menu retains native menu');
+    sequence.push('returned'); await Vue.nextTick(); sequence.push('nextTick'); await settle();
+    expected.forEach(name => assert(emitted.some(event => event.name === name), label + ' emits ' + name));
+    const cell = element.closest('td,th');
+    const kernel = wrapper.tableExample();
+    const columnNode = cell && kernel.getColumnNode(cell);
+    const rowNode = cell && cell.tagName === 'TD' && kernel.getRowNode(cell.parentElement);
+    const column = columnNode && columnNode.item;
+    const row = rowNode && rowNode.item;
+    for (const event of emitted) {
+      const args = event.args;
+      if (['cell-click', 'cell-dblclick', 'cell-mouse-enter', 'cell-mouse-leave'].includes(event.name)) {
+        assert.strictEqual(args[0], row); assert.strictEqual(args[1], column);
+        assert.strictEqual(args[2], cell); assert.strictEqual(args[3], domEvent);
+      } else if (['row-click', 'row-dblclick', 'row-contextmenu'].includes(event.name)) {
+        assert.strictEqual(args[0], row); assert.strictEqual(args[1], column); assert.strictEqual(args[2], domEvent);
+      } else if (['header-click', 'header-contextmenu'].includes(event.name)) {
+        assert.strictEqual(args[0], column); assert.strictEqual(args[1], domEvent);
+      } else if (['edit-actived', 'edit-disabled', 'expand-change'].includes(event.name)) {
+        assert.strictEqual(args[0].row, row); assert.strictEqual(args[0].column, column);
+        assert.equal(typeof args[0].rowIndex, 'number'); assert.equal(typeof args[0].columnIndex, 'number');
+        if (event.name === 'expand-change') { assert.equal(typeof args[0].expanded, 'boolean'); assert.strictEqual(args[0].$event, domEvent); }
+      } else if (event.name === 'current-change' || event.name === 'radio-change') {
+        assert.strictEqual(args[0], row);
+        if (event.name === 'radio-change') assert.strictEqual(args[1], column);
+      }
+    }
+    eventTiming[label] = sequence.slice();
+    observations[label] = emitted.map(event => event.name);
+    return emitted;
+  }
+  await dispatch('checkbox', 'tbody tr .elx-cell--checkbox,tbody tr .vxe-cell--checkbox', 'click', ['select', 'selection-change']);
+  assert.deepStrictEqual(emitted.filter(event => ['select', 'selection-change'].includes(event.name)).map(event => event.name), ['select', 'selection-change']);
+  assert(!emitted.some(event => event.name === 'row-click'));
+  assert.equal(emitted[0].args[1].id, 1); assert(Array.isArray(emitted[1].args[0]));
+  assert(sequence.indexOf('selection-change') < sequence.indexOf('returned'));
+  await dispatch('checkbox-all', 'thead .elx-cell--checkbox,thead .vxe-cell--checkbox', 'click', ['select-all', 'selection-change']);
+  await dispatch('cell-click', 'tbody tr td:nth-child(3)', 'click', ['cell-click', 'row-click']);
+  await dispatch('cell-dblclick', 'tbody tr td:nth-child(3)', 'dblclick', ['cell-dblclick', 'row-dblclick']);
+  await dispatch('row-contextmenu', 'tbody tr td:nth-child(3)', 'contextmenu', ['row-contextmenu']);
+  await dispatch('header-click', 'thead th:nth-child(3)', 'click', ['header-click']);
+  await dispatch('header-contextmenu', 'thead th:nth-child(3)', 'contextmenu', ['header-contextmenu']);
+  await dispatch('sort', 'thead .elx-sort--desc-btn,thead .vxe-sort--desc-btn', 'click', ['sort-change']);
+  assert.equal(emitted.find(event => event.name === 'sort-change').args[0].prop, 'id');
+  await dispatch('filter-open', 'thead th:nth-child(3) .elx-filter--btn,thead th:nth-child(3) .vxe-filter--btn', 'click', []);
+  await dispatch('filter-option', '.elx-table--filter-body .elx-table--filter-option,.vxe-table--filter-body .vxe-table--filter-option', 'click', []);
+  await dispatch('filter-confirm', '.elx-table--filter-footer button:first-child,.vxe-table--filter-footer button:first-child', 'click', ['filter-change']);
+  const filterPayload = emitted.find(event => event.name === 'filter-change').args[0];
+  observations.filters = filterPayload.filters.map(item => ({ property: item.property || item.field, values: item.values }));
+  assert.deepStrictEqual(observations.filters, [{ property: 'id', values: [1] }, { property: 'name', values: [] }]);
+  await dispatch('filter-reopen', 'thead th:nth-child(3) .elx-filter--btn,thead th:nth-child(3) .vxe-filter--btn', 'click', []);
+  await dispatch('filter-reset', '.elx-table--filter-footer button:last-child,.vxe-table--filter-footer button:last-child', 'click', ['filter-change']);
+  observations.resetFilters = emitted.find(event => event.name === 'filter-change').args[0].filters.map(item => ({ property: item.property || item.field, values: item.values }));
+  assert.deepStrictEqual(observations.resetFilters, [{ property: 'id', values: [] }, { property: 'name', values: [] }]);
+  emitted = [];
+  assert.strictEqual(wrapper.clearFilter(), undefined); await settle();
+  assert(!emitted.some(event => event.name === 'filter-change'), 'programmatic clearFilter is silent');
+  await dispatch('edit', 'tbody tr td:nth-child(4)', 'click', ['edit-actived']);
+  assert.equal(emitted.filter(event => event.name === 'edit-actived').length, 1);
+  emitted = []; await wrapper.clearActived(); await settle();
+  assert.equal(emitted.filter(event => event.name === 'edit-closed').length, 1);
+  vm.allowEdit = false; await Vue.nextTick();
+  await dispatch('edit-disabled', 'tbody tr td:nth-child(4)', 'click', ['edit-disabled']);
+  assert.equal(emitted.filter(event => event.name === 'edit-disabled').length, 1);
+  await dispatch('mouseenter', 'tbody tr td:nth-child(3)', mode === 'old' ? 'mouseenter' : 'mouseover', ['cell-mouse-enter']);
+  await dispatch('mouseleave', 'tbody tr td:nth-child(3)', 'mouseleave', ['cell-mouse-leave']);
+  await dispatch('expand-row', 'tbody tr .elx-table--expanded,tbody tr .vxe-table--expand-btn', 'click', ['expand-change']);
+  wrapper.clearSelection(); wrapper.toggleRowSelection([{ row: wrapper.getRowById(1), selected: true }]);
+  assert.strictEqual(wrapper.removeCheckboxRow(), undefined); await settle();
+  assert.deepStrictEqual(wrapper.getTableData().fullData.map(row => row.id), [2]);
+  await wrapper.loadColumn([{ type: 'radio' }, { field: 'name' }]); await settle();
+  await dispatch('radio', 'tbody tr .elx-cell--radio,tbody tr .vxe-cell--radio', 'click', ['radio-change']);
+  assert.equal(emitted.find(event => event.name === 'radio-change').args[0].id, 2);
+  for (const name of ['row-contextmenu', 'header-contextmenu']) wrapper.$off(name);
+  await dispatch('unobserved-contextmenu', 'tbody tr td:nth-child(2)', 'contextmenu', []);
+  // Auxiliary wrapper-direct contracts: no claim that these are user DOM input.
+  const auxiliary = [];
+  for (const name of ['handlePageSize', 'show-field', 'reset', 'amend-field', 'handle-field']) wrapper.$on(name, (...args) => auxiliary.push({ name, args }));
+  vm.$el.querySelector('.el-pagination .btn-next').click(); await settle();
+  assert.deepStrictEqual(auxiliary.map(event => event.args[0]), [{ size: 10, page: 2 }]);
+  observations['pagination DOM'] = auxiliary[0].args[0]; auxiliary.length = 0;
+  wrapper.handleSizeChange(25); wrapper.handleCurrentChange(3);
+  assert.deepStrictEqual(auxiliary.slice(0, 2).map(event => event.args[0]), [{ size: 25, page: 2 }, { size: 25, page: 3 }]);
+  wrapper.plDialogOpens(); await new Promise(resolve => setTimeout(resolve, 240));
+  assert.equal(wrapper.$refs.plDialog.style.width, '300px');
+  Array.from(vm.$el.querySelectorAll('.table-cus-footer button')).find(button => button.textContent.trim() === '确定').click(); assert.equal(auxiliary[2].name, 'show-field'); assert(Array.isArray(auxiliary[2].args[0]));
+  wrapper.plDialogOpens(); await new Promise(resolve => setTimeout(resolve, 240));
+  Array.from(vm.$el.querySelectorAll('.table-cus-footer button')).find(button => button.textContent.trim() === '重置').click(); assert.equal(auxiliary[3].name, 'reset');
+  const field = { name: 'Auxiliary' };
+  wrapper.amendField(field, 0); assert.strictEqual(auxiliary[4].args[0], field); assert.equal(auxiliary[4].args[1], 0);
+  wrapper.handleField('下移', 0, [field, { name: 'Second' }]);
+  assert.equal(auxiliary[5].name, 'handle-field');
+  assert.deepStrictEqual(auxiliary[5].args, ['下移', 0]);
+  wrapper.plDialogOpens(); wrapper.closeModal(); assert.equal(wrapper.$refs.plDialog.style.width, '0px');
+  observations['wrapper-direct auxiliary'] = auxiliary.map(event => event.name);
+  vm.$destroy(); vm.$el.remove();
+  const parentRow = { id: 10, name: 'Tree', children: [{ id: 11, name: 'Child' }] };
+  vm = new Vue({ render: h => h(Grid, { ref: 'grid', props: {
+    height: 240, data: [parentRow], treeConfig: { children: 'children' },
+    keyboardConfig: { isArrow: true, isTab: true }, mouseConfig: { selected: true },
+    columns: [{ field: 'name', treeNode: true }]
+  } }) }).$mount();
+  document.body.appendChild(vm.$el); await settle();
+  let treePayload;
+  const treeEvents = [];
+  vm.$refs.grid.$on('toggle-tree-expand', value => { treePayload = value; treeEvents.push('toggle-tree-expand'); });
+  vm.$refs.grid.$on('cell-click', (row, column, cell, event) => {
+    assert.strictEqual(row, parentRow); assert.strictEqual(event, treeEvent);
+    assert.strictEqual(column, vm.$refs.grid.getColumnByField('name')); assert(cell instanceof HTMLElement);
+    treeEvents.push('cell-click');
+  });
+  vm.$refs.grid.$on('row-click', (row, column, event) => { assert.strictEqual(row, parentRow); assert.strictEqual(event, treeEvent); treeEvents.push('row-click'); });
+  const treeButton = vm.$el.querySelector('.elx-tree--node-btn,.vxe-cell--tree-btn');
+  assert(treeButton, 'real tree expand control');
+  const treeEvent = new window.MouseEvent('click', { bubbles: true });
+  treeButton.dispatchEvent(treeEvent); await settle();
+  assert(treePayload); assert.strictEqual(treePayload.row, parentRow);
+  assert.strictEqual(treePayload.$event, treeEvent); assert.equal(treePayload.expanded, true);
+  assert(vm.$refs.grid.isTreeExpandByRow(parentRow));
+  observations['tree DOM'] = { expanded: treePayload.expanded, row: treePayload.row.id };
+  observations['tree DOM events'] = treeEvents;
+  let keyPayload;
+  vm.$refs.grid.$on('keydown', payload => { keyPayload = payload; });
+  const firstCell = vm.$el.querySelector('tbody td');
+  firstCell.dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true, button: 0 }));
+  const keyEvent = new window.KeyboardEvent('keydown', { bubbles: true, key: 'ArrowDown', code: 'ArrowDown', keyCode: 40, which: 40 });
+  document.dispatchEvent(keyEvent); await settle();
+  assert(keyPayload); assert.strictEqual(keyPayload.$event, keyEvent);
+  observations['keydown DOM'] = Object.keys(keyPayload);
+  let scrollPayload; let scrollSource;
+  vm.$refs.grid.$on('table-body-scroll', (payload, event) => { scrollPayload = payload; scrollSource = event; });
+  const scrollBody = vm.$el.querySelector('.vxe-table--scroll-y-handle') || vm.$el.querySelector('.elx-table--body-wrapper,.vxe-table--body-wrapper');
+  scrollBody.scrollTop = 30;
+  const scrollEvent = new window.Event('scroll'); scrollBody.dispatchEvent(scrollEvent); await settle();
+  assert(scrollPayload); assert.strictEqual(scrollSource, scrollEvent);
+  assert.equal(scrollPayload.scrollTop, 30); assert.equal(scrollPayload.isY, true);
+  observations['scroll DOM fields'] = Object.keys(scrollPayload).sort();
+  for (const kind of ['expand', 'tree']) {
+    vm.$destroy(); vm.$el.remove();
+    vm = new Vue({ render: h => h(Grid, { ref: 'grid', props: {
+      height: 240, data: [parentRow], highlightCurrentRow: true,
+      expandConfig: kind === 'expand' ? { trigger: 'row' } : null,
+      treeConfig: kind === 'tree' ? { children: 'children', trigger: 'row' } : null,
+      columns: kind === 'expand' ? [{ type: 'expand' }, { field: 'name' }] : [{ field: 'name', treeNode: true }]
+    } }) }).$mount();
+    document.body.appendChild(vm.$el); await settle();
+    const eventName = kind === 'expand' ? 'expand-change' : 'toggle-tree-expand';
+    const order = [];
+    for (const name of [eventName, 'current-change', 'cell-click', 'row-click']) vm.$refs.grid.$on(name, () => order.push(name));
+    vm.$el.querySelector(kind === 'expand' ? 'tbody td:nth-child(2)' : 'tbody td').click();
+    order.push('returned'); await settle();
+    assert.deepStrictEqual(order, [eventName, 'current-change', 'cell-click', 'row-click', 'returned'], kind + ' row-trigger retains native event ordering');
+    observations[kind + ' row-trigger'] = order;
+  }
+  assert.deepStrictEqual(errors, []);
+  console.log('RESULT ' + JSON.stringify(observations));
+  console.log('TIMING ' + JSON.stringify(eventTiming));
+})().catch(error => { console.error(error.stack); process.exitCode = 1; }).finally(() => {
+  if (vm) vm.$destroy(); dom.window.close(); setImmediate(() => process.exit(process.exitCode || 0));
+});

package/packages/ux-grid/test/renderer-async.cjs

@@ -0,0 +1,140 @@
+// Real Element Cascader lifecycle/store behavior in jsdom. Direct wrapper calls
+// below separately verify loader return/this/throw contracts, not UI interaction.
+const assert = require('assert');
+const root = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!root) throw Error('Set UX_GRID_TEST_DEPENDENCIES');
+const external = name => require(require.resolve(name, { paths: [root] }));
+const { JSDOM } = external('jsdom');
+const dom = new JSDOM('<html><body><script></script></body></html>', { url: 'http://localhost/' });
+for (const key of ['window', 'document', 'Element', 'HTMLElement', 'Node', 'MutationObserver', 'getComputedStyle', 'name', 'Image']) global[key] = dom.window[key];
+Object.defineProperty(global, 'navigator', { configurable: true, value: dom.window.navigator });
+global.requestAnimationFrame = cb => setTimeout(cb, 0);
+global.cancelAnimationFrame = clearTimeout;
+const Vue = require('vue');
+for (const base of [root, require.resolve('vxe-table'), require.resolve('vxe-pc-ui')]) require.cache[require.resolve('vue', { paths: [base] })] = require.cache[require.resolve('vue')];
+Vue.config.productionTip = false;
+Vue.config.devtools = false;
+const errors = [];
+Vue.config.errorHandler = error => errors.push(error.stack || String(error));
+Vue.use(external('element-ui'));
+require('../../../lib/ux-grid.js');
+const { renderer } = require('vxe-table/lib/ui');
+const cascader = renderer.get('ElCascader');
+const wait = () => new Promise(resolve => setTimeout(resolve, 40));
+const mounted = [];
+function fixture(options, loader) {
+  const requests = [];
+  const row = { value: [] };
+  const column = { field: 'value' };
+  const renderOpts = { name: 'ElCascader', props: { clearable: true, options, props: { lazy: true, lazyLoad: loader || function(node, resolve) { requests.push({ node, resolve, receiver: this }); } } } };
+  const params = { row, column, $table: { updateStatus() {} } };
+  const vm = new Vue({ data: { renderOpts, row, shown: true }, render(h) {
+    return h('div', this.shown ? cascader.renderTableEdit(h, this.renderOpts, params) : []);
+  } }).$mount();
+  document.body.appendChild(vm.$el);
+  mounted.push(vm);
+  return { vm, requests, renderOpts, component: () => vm.$children[0] };
+}
+function nodes(component) { return component.$refs.panel.store.getFlattedNodes(false, false); }
+async function expand(f, label) {
+  f.vm.$el.querySelector('input').click(); await wait();
+  const el = Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === label);
+  assert(el, 'real cascader option ' + label); el.click(); await wait();
+}
+(async () => {
+  // Initial root request binds to the mounted panel; two callbacks cannot append twice.
+  const rootLoad = fixture([]); await wait();
+  assert.equal(rootLoad.requests.length, 1);
+  const rootRequest = rootLoad.requests[0];
+  rootRequest.resolve([{ value: 'a', label: 'A', leaf: true }]); await wait();
+  rootRequest.resolve([{ value: 'duplicate', label: 'Duplicate', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(rootLoad.component()).map(n => n.value), ['a']);
+  rootLoad.vm.$destroy();
+  // Replacing options invalidates the pending root callback without touching current store.
+  const rootStale = fixture([]); await wait();
+  const staleRoot = rootStale.requests[0];
+  rootStale.renderOpts.props.options = [{ value: 'replacement', label: 'Replacement', leaf: true }]; await wait();
+  staleRoot.resolve([{ value: 'stale', label: 'Stale', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(rootStale.component()).map(n => n.value), ['replacement']);
+  rootStale.vm.$destroy();
+  // Two live generations, B resolves before A: obsolete A cannot contaminate
+  // either Element's replacement store or the renderer's hydrated remount cache.
+  const generations = fixture([]); await wait();
+  const requestA = generations.requests[0];
+  generations.renderOpts.props.options = []; await wait();
+  assert.equal(generations.requests.length, 2, 'replacing empty options starts generation B');
+  generations.requests[1].resolve([{ value: 'B', label: 'Current B', leaf: true }]); await wait();
+  requestA.resolve([{ value: 'A', label: 'Obsolete A', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(generations.component()).map(n => n.value), ['B']);
+  generations.vm.shown = false; await wait();
+  generations.vm.shown = true; await wait();
+  assert.deepStrictEqual(nodes(generations.component()).map(n => n.value), ['B'], 'remount hydrates only the winning generation');
+  assert.equal(generations.requests.length, 2, 'hydrated root does not issue a redundant loader request');
+  generations.vm.$destroy();
+  // Unmount must leave the destroyed Element store untouched.
+  const destroyed = fixture([]); await wait();
+  const oldComponent = destroyed.component();
+  const oldStore = oldComponent.$refs.panel.store;
+  destroyed.vm.shown = false; await wait();
+  destroyed.requests[0].resolve([{ value: 'late', label: 'Late', leaf: true }]); await wait();
+  assert.equal(oldComponent._isDestroyed, true);
+  assert.deepStrictEqual(oldStore.getFlattedNodes(false, false), []);
+  destroyed.vm.$destroy();
+  // Child request and options replacement, with a real expand click.
+  const child = fixture([{ value: 'parent', label: 'Parent' }]); await wait();
+  await expand(child, 'Parent');
+  assert.equal(child.requests.length, 1);
+  assert.equal(child.requests[0].node.value, 'parent');
+  child.renderOpts.props.options = [{ value: 'fresh', label: 'Fresh', leaf: true }]; await wait();
+  child.requests[0].resolve([{ value: 'lateChild', label: 'Late Child', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(child.component()).map(n => n.value), ['fresh']);
+  child.vm.$destroy();
+  const childOnce = fixture([{ value: 'parent', label: 'Once Parent' }]); await wait();
+  await expand(childOnce, 'Once Parent');
+  childOnce.requests[0].resolve([{ value: 'child', label: 'Once Child', leaf: true }]); await wait();
+  const activeStore = childOnce.component().$refs.panel.store;
+  childOnce.vm.$forceUpdate(); await wait();
+  assert.strictEqual(childOnce.component().$refs.panel.store, activeStore, 'unrelated renderer rerender must preserve active lazy store');
+  childOnce.requests[0].resolve([{ value: 'duplicate', label: 'Duplicate', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(childOnce.component()).map(n => n.value), ['parent', 'child']);
+  childOnce.vm.shown = false; await wait();
+  childOnce.vm.shown = true; await wait();
+  childOnce.renderOpts.props.options[0].label = 'Renamed';
+  Vue.set(childOnce.renderOpts.props.options[0], 'disabled', true); await wait();
+  assert.equal(nodes(childOnce.component())[0].label, 'Renamed', 'external label edits reach hydrated nodes');
+  assert.equal(nodes(childOnce.component())[0].isDisabled, true, 'external disabled edits reach hydrated nodes');
+  Vue.set(childOnce.renderOpts.props.options[0], 'children', [{ value: 'newChild', label: 'New Child', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(childOnce.component()).map(n => n.value), ['parent', 'newChild'], 'external children edits replace cached children');
+  childOnce.vm.$destroy();
+  const childDestroyed = fixture([{ value: 'parent', label: 'Doomed Parent' }]); await wait();
+  await expand(childDestroyed, 'Doomed Parent');
+  const oldChildStore = childDestroyed.component().$refs.panel.store;
+  childDestroyed.vm.shown = false; await wait();
+  childDestroyed.requests[0].resolve([{ value: 'late', label: 'Late', leaf: true }]); await wait();
+  assert.deepStrictEqual(oldChildStore.getFlattedNodes(false, false).map(n => n.value), ['parent']);
+  childDestroyed.vm.$destroy();
+  // Same options identity, but Element resets its store after deep label change.
+  const sameOptions = fixture([{ value: 'parent', label: 'Before' }]); await wait();
+  await expand(sameOptions, 'Before');
+  sameOptions.renderOpts.props.options[0].label = 'After'; await wait();
+  sameOptions.requests[0].resolve([{ value: 'obsolete', label: 'Obsolete', leaf: true }]); await wait();
+  assert.deepStrictEqual(nodes(sameOptions.component()).map(n => n.value), ['parent']);
+  sameOptions.vm.$destroy();
+  // The wrapper itself retains the exact business loader call contract.
+  const host = new Vue();
+  const row = { value: [] }, column = { field: 'value' };
+  const params = { row, column, $table: { updateStatus() {} } };
+  const receiver = {}, returned = {}, failure = Error('business failure');
+  let captured;
+  const options = { name: 'ElCascader', props: { options: [{ value: 'root' }], props: { lazy: true, lazyLoad(node, resolve) { assert.strictEqual(this, receiver); captured = resolve; return returned; } } } };
+  let vnode = cascader.renderTableEdit(host.$createElement, options, params)[0];
+  let resolutions = 0;
+  assert.strictEqual(vnode.componentOptions.propsData.props.lazyLoad.call(receiver, { root: true }, () => resolutions++), returned);
+  captured([]); captured([]); assert.equal(resolutions, 1);
+  options.props.props.lazyLoad = () => { throw failure; };
+  vnode = cascader.renderTableEdit(host.$createElement, options, params)[0];
+  assert.throws(() => vnode.componentOptions.propsData.props.lazyLoad({ root: true }, () => {}), error => error === failure);
+  host.$destroy();
+  assert.deepStrictEqual(errors, []);
+  console.log('renderer async passed: real Element root/child/stale/store/destroy lifecycle; direct loader this/return/throw/once contracts');
+})().catch(error => { console.error(error); process.exitCode = 1; }).finally(() => { mounted.forEach(vm => vm.$destroy()); dom.window.close(); });

package/packages/ux-grid/test/renderer-boundaries.cjs

@@ -0,0 +1,196 @@
+// Real Vue/Element/VXE registry and DOM events; layout is covered by Chrome.
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const dependencyRoot = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!dependencyRoot) throw Error('Set UX_GRID_TEST_DEPENDENCIES');
+const external = name => require(require.resolve(name, { paths: [dependencyRoot] }));
+const { JSDOM } = external('jsdom');
+const dom = new JSDOM('<html><body><script></script></body></html>', { url: 'http://localhost/' });
+for (const key of ['window', 'document', 'Element', 'HTMLElement', 'HTMLTableElement', 'Node', 'MutationObserver', 'getComputedStyle', 'name', 'Image']) global[key] = dom.window[key];
+Object.defineProperty(global, 'navigator', { configurable: true, value: dom.window.navigator });
+global.requestAnimationFrame = cb => setTimeout(cb, 0);
+global.cancelAnimationFrame = clearTimeout;
+const Vue = require('vue');
+for (const root of [dependencyRoot, require.resolve('vxe-table'), require.resolve('vxe-pc-ui')]) require.cache[require.resolve('vue', { paths: [root] })] = require.cache[require.resolve('vue')];
+Vue.config.productionTip = false;
+Vue.config.devtools = false;
+const errors = [];
+Vue.config.errorHandler = error => errors.push(error.stack || String(error));
+Vue.use(external('element-ui'));
+const { renderer, interceptor } = require('vxe-table/lib/ui');
+const GridModule = require('../../../lib/ux-grid.js');
+const Grid = GridModule.default || GridModule;
+const wait = () => new Promise(resolve => setTimeout(resolve, 90));
+let vm;
+let validations = 0;
+(async () => {
+  const row = { id: 1, choice: 'a', cascade: [], lazy: [], time: '14:24:56' };
+  const options = [{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }];
+  vm = new Vue({ render(h) { return h(Grid, { ref: 'grid', props: {
+    height: 280, data: [row], editConfig: { trigger: 'click', mode: 'cell' },
+    validConfig: { message: 'inline' },
+    rules: { choice: [{ trigger: 'change', validator({ cellValue }) {
+      validations++;
+      return cellValue === 'b' ? Promise.reject(new Error('Beta rejected')) : Promise.resolve();
+    } }] },
+    columns: [
+      { field: 'choice', editRender: { name: 'ElSelect', options, props: { clearable: true } } },
+      { field: 'cascade', editRender: { name: 'ElCascader', options: [{ value: 'root', label: 'Root', children: [{ value: 'leaf', label: 'Leaf' }] }] } },
+      { field: 'lazy', editRender: { name: 'ElCascader', props: { clearable: true, options: [{ value: 'parent', label: 'Lazy Parent' }], props: { lazy: true, lazyLoad(node, resolve) { setTimeout(() => resolve([{ value: 'child', label: 'Lazy Child', leaf: true }]), 0); } } } } },
+      { field: 'time', editRender: { name: 'ElTimePicker', props: { valueFormat: 'HH:mm:ss' } } }
+    ]
+  } }); } }).$mount();
+  document.body.appendChild(vm.$el);
+  await wait();
+  const grid = vm.$refs.grid;
+  const table = grid.tableExample();
+  const event = new window.MouseEvent('mousedown', { bubbles: true });
+  const trace = [];
+  const first = params => { trace.push('first'); params.marker = 'mutated'; };
+  const second = params => { trace.push('second'); assert.equal(params.marker, 'original'); };
+  interceptor.add('event.clearActived', first);
+  interceptor.add('event.clearActived', second);
+  const invoke = () => table.preventEvent(event, 'event.clearEdit', { marker: 'original' }, () => { trace.push('next'); return 'next-result'; });
+  assert.equal(invoke(), 'next-result');
+  assert.deepStrictEqual(trace.splice(0), ['first', 'second', 'next']);
+  const veto = () => false;
+  interceptor.add('event.clearActived', veto);
+  assert.equal(invoke(), null);
+  assert.deepStrictEqual(trace.splice(0), ['first', 'second']);
+  interceptor.delete('event.clearActived', veto);
+  const result = { exact: true };
+  const resultVeto = () => ({ status: false, result });
+  interceptor.add('event.clearActived', resultVeto);
+  assert.strictEqual(invoke(), result);
+  trace.length = 0;
+  interceptor.delete('event.clearActived', resultVeto);
+  const modern = () => { trace.push('modern'); };
+  interceptor.add('event.clearEdit', modern);
+  invoke();
+  assert.deepStrictEqual(trace.splice(0), ['modern', 'next']);
+  // Actual Element dropdown DOM receives mousedown/click while modern callbacks exist.
+  await grid.setActiveCell(row, 'choice'); await wait();
+  vm.$el.querySelector('.el-select input').dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true }));
+  vm.$el.querySelector('.el-select input').click(); await wait();
+  const beta = Array.from(document.querySelectorAll('.el-select-dropdown__item')).find(el => el.textContent.trim() === 'Beta');
+  assert(beta, 'actual Element option mounted');
+  vm.$el.querySelector('.el-select input').focus();
+  const focusedInput = document.activeElement;
+  validations = 0;
+  beta.dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true }));
+  beta.click(); await wait();
+  assert.equal(row.choice, 'b');
+  assert.strictEqual(document.activeElement, focusedInput, 'validation activation does not steal DOM focus');
+  assert.equal(validations, 1, 'one real kernel validation per Element change');
+  assert(vm.$el.querySelector('.col--valid-error'), 'validator rejection marks invalid cell');
+  assert(table.getEditRecord(), 'popup preserves active edit with modern interceptor');
+  vm.$el.querySelector('.el-select .el-input').dispatchEvent(new window.MouseEvent('mouseenter', { bubbles: false }));
+  await wait();
+  const clear = vm.$el.querySelector('.el-select .el-icon-circle-close');
+  assert(clear, 'real Element clear control'); clear.click(); await wait();
+  assert.equal(row.choice, '');
+  assert.equal(validations, 2, 'clear triggers exactly one additional kernel validation');
+  assert(!vm.$el.querySelector('.col--valid-error'), 'clear removes rejected value validation state');
+  document.body.dispatchEvent(new window.MouseEvent('mousedown', { bubbles: true }));
+  await wait();
+  assert(!table.getEditRecord(), 'outside click closes editor');
+  interceptor.delete('event.clearEdit', modern);
+  trace.length = 0;
+  invoke(); assert.deepStrictEqual(trace.splice(0), ['first', 'second', 'next']);
+  // Simulate another separately bundled renderer module sharing the actual registry.
+  const source = fs.readFileSync(path.join(__dirname, '../src/element-renderer.js'), 'utf8').replace(/^import .*;$/gm, '');
+  const counts = ['event.clearEdit', 'event.clearActived', 'event.clearFilter'].map(name => interceptor.get(name).length);
+  require('vm').runInNewContext(source, { XEUtils: require('xe-utils'), renderer, interceptor, document });
+  assert.deepStrictEqual(['event.clearEdit', 'event.clearActived', 'event.clearFilter'].map(name => interceptor.get(name).length), counts);
+  invoke(); assert.deepStrictEqual(trace.splice(0), ['first', 'second', 'next']);
+  interceptor.delete('event.clearActived', first);
+  interceptor.delete('event.clearActived', second);
+  await grid.setActiveCell(row, 'cascade'); await wait();
+  vm.$el.querySelector('.el-cascader input').click(); await wait();
+  const root = Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Root');
+  assert(root, 'top-level renderer options reach real Cascader');
+  root.click(); await wait();
+  const leaf = Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Leaf');
+  assert(leaf); leaf.click(); await wait();
+  assert.deepStrictEqual(Array.from(row.cascade), ['root', 'leaf']);
+  await grid.clearActived(); await wait();
+  assert(vm.$el.textContent.includes('Root / Leaf'));
+  await grid.setActiveCell(row, 'lazy'); await wait();
+  vm.$el.querySelector('.el-cascader input').click(); await wait();
+  const parent = Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Lazy Parent');
+  assert(parent); parent.click(); await wait();
+  table.$forceUpdate(); await wait();
+  const child = Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Lazy Child');
+  assert(child); child.click(); await wait();
+  assert.deepStrictEqual(errors, []);
+  assert.deepStrictEqual(Array.from(row.lazy), ['parent', 'child']);
+  await grid.clearActived(); await wait();
+  assert(vm.$el.textContent.includes('Lazy Parent / Lazy Child'), 'lazy checked node label survives closing edit');
+  // Cache uses selected values and unformatted path labels; export shares it.
+  const lazyColumn = table.getColumnByField('lazy');
+  const lazyParams = { row, column: lazyColumn };
+  const lazyRenderer = renderer.get('ElCascader');
+  assert.equal(lazyRenderer.tableExportMethod(lazyParams), 'Lazy Parent / Lazy Child');
+  const lazyOptions = lazyColumn.editRender;
+  lazyOptions.props.options[0].label = 'Renamed Parent';
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], 'Renamed Parent / Lazy Child', 'latest static prefix wins over lazy cache');
+  lazyOptions.props.separator = '>';
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], 'Renamed Parent > Lazy Child');
+  lazyOptions.props.showAllLevels = false;
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], 'Lazy Child');
+  await grid.setActiveCell(row, 'lazy'); await wait();
+  assert.equal(vm.$el.querySelector('.el-cascader input').value, 'Lazy Child', 'lazy selection restored after editor remount');
+  vm.$el.querySelector('.el-cascader').dispatchEvent(new window.MouseEvent('mouseenter', { bubbles: false }));
+  await wait();
+  const lazyClear = vm.$el.querySelector('.el-cascader .el-icon-circle-close');
+  assert(lazyClear, 'restored lazy selection has a real clear control');
+  lazyClear.click(); await wait();
+  assert.deepStrictEqual(Array.from(row.lazy), [], 'real clear updates lazy model after remount');
+  vm.$el.querySelector('.el-cascader input').click(); await wait();
+  Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Renamed Parent').click(); await wait();
+  Array.from(document.querySelectorAll('.el-cascader-node')).find(el => el.textContent.trim() === 'Lazy Child').click(); await wait();
+  assert.deepStrictEqual(Array.from(row.lazy), ['parent', 'child'], 'restored lazy children remain selectable after clear');
+  await grid.clearActived(); await wait();
+  lazyOptions.props.options = [{ value: 'parent', label: 'Replacement Parent' }];
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], 'Replacement Parent', 'replaced option identity cannot reuse obsolete lazy labels');
+  lazyOptions.props.options = [{ value: 'parent', label: 'New Parent', children: [{ value: 'child', label: 'New Child' }] }];
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], 'New Child', 'fresh complete options win over cached labels');
+  row.lazy = [];
+  assert.equal(lazyRenderer.renderTableCell(null, lazyOptions, lazyParams)[0], '', 'empty selection cannot resurrect cached label');
+  const display = (name, value, props) => renderer.get(name).renderTableCell(null, { name, props }, { row: { value }, column: { field: 'value' } })[0];
+  assert.equal(display('ElTimePicker', '14:24:56', { valueFormat: 'HH:mm:ss' }), '14:24:56');
+  assert.equal(display('ElTimePicker', ['14:24:56', '18:25:57'], { valueFormat: 'HH:mm:ss', rangeSeparator: '' }), '14:24:56  18:25:57');
+  assert.equal(display('ElTimePicker', '14:24', { valueFormat: 'HH:mm', format: 'HH:mm' }), '14:24');
+  assert.equal(display('ElTimePicker', '02:24:56 PM', { valueFormat: 'hh:mm:ss A' }), '14:24:56');
+  assert.equal(display('ElTimePicker', '12:24:56 AM', { valueFormat: 'hh:mm:ss A' }), '00:24:56');
+  assert.equal(display('ElTimePicker', '12:24:56 PM', { valueFormat: 'hh:mm:ss A' }), '12:24:56');
+  assert.equal(display('ElTimePicker', 'PM 02:24:56', { valueFormat: 'A hh:mm:ss' }), '14:24:56');
+  assert.equal(display('ElTimePicker', '24:56 02 PM', { valueFormat: 'mm:ss hh A' }), '14:24:56');
+  assert.equal(display('ElTimePicker', '02:24:56 PM', { valueFormat: 'hh:mm:ss A', format: 'hh:mm:ss A' }), '02:24:56 PM');
+  const stamp = String(new Date(2026, 8, 17, 14, 24, 56).getTime());
+  assert.equal(display('ElDatePicker', stamp, { valueFormat: 'timestamp' }), '2026-09-17');
+  assert.equal(display('ElTimePicker', stamp, { valueFormat: 'timestamp' }), '14:24:56');
+  assert.equal(display('ElDatePicker', ['2026-09-01', '2026-09-17'], { type: 'daterange', valueFormat: 'yyyy-MM-dd', rangeSeparator: '' }), '2026-09-01  2026-09-17');
+  for (const value of [null, undefined, '']) assert.equal(display('ElTimePicker', value, {}), '');
+  const dateFilter = renderer.get('ElDatePicker').tableFilterDefaultMethod;
+  const match = value => dateFilter({ option: { data: ['2026-09-01', '2026-09-17'] }, row: { value }, column: { field: 'value', filterRender: { props: { type: 'dates', valueFormat: 'yyyy-MM-dd' } } } });
+  assert(match('2026-09-01')); assert(match('2026-09-17')); assert(!match('2026-09-10')); assert(!match(null));
+  const filter = (name, value, data, props) => renderer.get(name).tableFilterDefaultMethod({ option: { data }, row: { value }, column: { field: 'value', filterRender: { props } } });
+  assert(filter('ElDatePicker', new Date(2026, 8, 17, 21), new Date(2026, 8, 17, 8), { type: 'date' }), 'date filter ignores time on Date models');
+  assert(filter('ElDatePicker', '17/09/2026', ['01/09/2026', '30/09/2026'], { type: 'daterange', valueFormat: 'dd/MM/yyyy' }), 'custom formatted range compares chronological dates');
+  assert(!filter('ElDatePicker', '01/10/2026', ['01/09/2026', '30/09/2026'], { type: 'daterange', valueFormat: 'dd/MM/yyyy' }));
+  assert(filter('ElDatePicker', '2026-09-17 14:25:00', ['2026-09-17 14:24:59', '2026-09-17 14:25:00'], { type: 'datetimerange', valueFormat: 'yyyy-MM-dd HH:mm:ss' }));
+  assert(!filter('ElDatePicker', '2026-09-17 14:25:01', ['2026-09-17 14:24:59', '2026-09-17 14:25:00'], { type: 'datetimerange', valueFormat: 'yyyy-MM-dd HH:mm:ss' }));
+  assert(filter('ElDatePicker', '2026-09', ['2026-08', '2026-10'], { type: 'monthrange', valueFormat: 'yyyy-MM' }));
+  for (const invalid of [null, undefined, '', 'invalid']) {
+    assert(!filter('ElDatePicker', invalid, invalid, { type: 'date' }), 'invalid date cannot equal invalid date');
+    assert(!filter('ElTimePicker', invalid, invalid, { valueFormat: 'HH:mm:ss' }), 'invalid time cannot equal invalid time');
+    assert(!filter('ElTimePicker', '14:24:56', [invalid, '18:00:00'], { isRange: true, valueFormat: 'HH:mm:ss' }));
+  }
+  assert(filter('ElTimePicker', '02:24:56 PM', ['01:00:00 PM', '02:24:56 PM'], { isRange: true, valueFormat: 'hh:mm:ss A' }));
+  assert(!filter('ElTimePicker', '02:24:57 PM', ['01:00:00 PM', '02:24:56 PM'], { isRange: true, valueFormat: 'hh:mm:ss A' }));
+  assert(!filter('ElTimePicker', '14:24:56', ['18:00:00', '13:00:00'], { isRange: true, valueFormat: 'HH:mm:ss' }));
+  assert.deepStrictEqual(errors, []);
+  console.log('renderer boundaries passed: dynamic real registry, veto/priority/reload, Element Select/Cascader DOM, date/time formats and dates filter');
+})().catch(error => { console.error(error); process.exitCode = 1; }).finally(() => { if (vm) vm.$destroy(); dom.window.close(); });