umy-ui-table 1.2.4 → 1.2.5

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-boundaries.cjs

@@ -0,0 +1,165 @@
+// 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: { 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();
+  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 = [{ value: 'parent', 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');
+  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));
+  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(); });

package/packages/ux-grid/test/ui-components.cjs

@@ -0,0 +1,103 @@
+// Real official UI dependency wiring; browser suite measures visual geometry.
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const dependencyRoot = process.env.UX_GRID_TEST_DEPENDENCIES || process.cwd();
+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 = callback => setTimeout(callback, 0);
+global.cancelAnimationFrame = clearTimeout;
+const Vue = require('vue');
+const vueModule = require.cache[require.resolve('vue')];
+for (const root of [dependencyRoot, require.resolve('vxe-table'), require.resolve('vxe-pc-ui')]) require.cache[require.resolve('vue', { paths: [root] })] = vueModule;
+Vue.config.productionTip = false;
+Vue.config.devtools = false;
+const errors = [];
+Vue.config.errorHandler = error => errors.push(error);
+const scenario = process.argv[2];
+if (!scenario) {
+  for (const name of ['empty', 'short', 'tooltip', 'loading', 'both']) {
+    const child = require('child_process').spawnSync(process.execPath, [__filename, name], { env: process.env, encoding: 'utf8' });
+    assert.strictEqual(child.status, 0, name + '\n' + child.stdout + child.stderr);
+  }
+}
+const { VxeUI } = require('vxe-table/lib/ui');
+const translator = key => 'custom:' + key;
+VxeUI.setConfig({ i18n: translator, tooltip: { enterDelay: 0 }, table: { rowConfig: { height: 47 } } });
+VxeUI.setIcon({ TABLE_SORT_ASC: 'consumer-sort' });
+const expectedArrays = scenario === 'empty'
+  ? { iconPicker: { icons: [] }, upload: { imageTypes: [] }, watermark: { gap: [] } }
+  : { iconPicker: { icons: [{ name: 'custom', children: [] }] }, upload: { imageTypes: ['custom'] }, watermark: { gap: [17] } };
+VxeUI.setConfig(expectedArrays);
+const customTooltip = { name: 'VxeTooltip', render(h) { return h('span'); } };
+const customLoading = { name: 'VxeLoading', render(h) { return h('span'); } };
+if (scenario === 'tooltip' || scenario === 'both') VxeUI.component(customTooltip);
+if (scenario === 'loading' || scenario === 'both') VxeUI.component(customLoading);
+const beforeTooltip = VxeUI.getComponent('VxeTooltip');
+const beforeLoading = VxeUI.getComponent('VxeLoading');
+if (scenario) VxeUI.setIcon({ LOADING: 'consumer-loading-icon' });
+const setup = fs.readFileSync(path.join(__dirname, '../src/setup.js'), 'utf8').replace(/^import .*;$/gm, '');
+function runSetup() {
+  require('vm').runInNewContext(setup, { require, VxeUI, XEUtils: require('xe-utils'), zhCN: {} });
+}
+runSetup();
+assert.strictEqual(VxeUI.getConfig().i18n, translator);
+assert.equal(VxeUI.getConfig().table.rowConfig.height, 47);
+assert.equal(VxeUI.getConfig().tooltip.enterDelay, 0);
+assert.equal(VxeUI.getIcon().TABLE_SORT_ASC, 'consumer-sort');
+for (const name of Object.keys(expectedArrays)) {
+  for (const field of Object.keys(expectedArrays[name])) {
+    assert.deepStrictEqual(VxeUI.getConfig()[name][field], expectedArrays[name][field]);
+  }
+}
+if (beforeTooltip) assert.strictEqual(VxeUI.getComponent('VxeTooltip'), beforeTooltip);
+if (beforeLoading) assert.strictEqual(VxeUI.getComponent('VxeLoading'), beforeLoading);
+if (scenario) {
+  assert.equal(VxeUI.getIcon().LOADING, 'consumer-loading-icon');
+  dom.window.close();
+  process.exit(0);
+}
+assert(VxeUI.getComponent('VxeTooltip') && VxeUI.getComponent('VxeLoading'));
+const originalTooltip = VxeUI.getComponent('VxeTooltip');
+const originalLoading = VxeUI.getComponent('VxeLoading');
+runSetup();
+assert.strictEqual(VxeUI.getComponent('VxeTooltip'), originalTooltip);
+assert.strictEqual(VxeUI.getComponent('VxeLoading'), originalLoading);
+assert.strictEqual(require('vxe-pc-ui/lib/ui').VxeUI, VxeUI, 'shared UI singleton');
+const Grid = require('../../../lib/ux-grid.js');
+let vm;
+const delay = () => new Promise(resolve => setTimeout(resolve, 100));
+(async () => {
+  vm = new Vue({
+    data: () => ({ loading: true }),
+    render(h) { return h(Grid.default || Grid, { ref: 'grid', props: {
+      loading: this.loading, height: 200, data: [{ name: '' }], columns: [{ field: 'name' }],
+      showOverflow: true, rules: { name: [{ required: true, message: 'Required name' }] }, validConfig: { message: 'tooltip' }
+    } }); }
+  }).$mount();
+  document.body.appendChild(vm.$el);
+  await delay();
+  assert(vm.$el.querySelector('.vxe-loading.is--visible'), 'official loading mask mounted');
+  assert(vm.$el.querySelector('.vxe-loading .vxe-icon-spinner'), 'official default spinner rendered');
+  vm.loading = false;
+  await delay();
+  assert(!vm.$el.querySelector('.vxe-loading.is--visible'));
+  const table = vm.$refs.grid.$refs.singleTable.$refs.refTable;
+  for (const name of ['refTooltip', 'refValidTooltip']) {
+    const tip = table.$refs[name];
+    assert(tip, name + ' exists');
+    await tip.open(vm.$el.querySelector('td'), 'Official popup');
+    await delay();
+    assert(document.body.textContent.includes('Official popup'));
+    await tip.close();
+  }
+  assert.deepStrictEqual(errors, []);
+  console.log('ux-grid official Tooltip/Loading wiring and consumer configuration passed');
+})().catch(error => { console.error(error); process.exitCode = 1; }).finally(() => {
+  if (vm) vm.$destroy();
+  dom.window.close();
+  setImmediate(() => process.exit(process.exitCode || 0));
+});

package/tools/locale/format.js

@@ -1,4 +1,4 @@
-import { hasOwn } from 'umy-ui/tools/utils/util';
+import { hasOwn } from '../utils/util';
 
 const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
 /**

package/tools/locale/index.js

@@ -1,6 +1,4 @@
-import defaultLang from 'umy-ui/tools/locale/lang/zh-CN';
-// 如果是按需加载，设置u-table的locale（本地 u-table 组件统一使用 packages/tools/locale）
-import tableLocale from '../../packages/tools/locale'
+import defaultLang from './lang/zh-CN';
 import Vue from 'vue';
 import deepmerge from 'deepmerge';
 import Format from './format';
@@ -41,10 +39,6 @@ export const t = function(path, options) {
 
 export const use = function(l) {
   lang = l || lang;
-  if (l) {
-     // 如果是按需加载，设置u-table语言
-      tableLocale.use(l)
-  }
 };
 
 export const i18n = function(fn) {

package/tools/mixins/locale.js

@@ -1,4 +1,4 @@
-import { t } from 'umy-ui/tools/locale';
+import { t } from '../locale';
 
 export default {
   methods: {

package/tools/utils/util.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { isString, isObject } from 'umy-ui/tools/utils/types';
+import { isString, isObject } from './types';
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;