umy-ui-table 1.2.4 → 1.2.6

package/packages/ux-grid/test/browser-renderer-contracts.cjs

@@ -0,0 +1,262 @@
+// Real Chrome Element renderer popup/edit boundaries, old and new isolated pages.
+// No mocked emissions or private resize handler calls.
+// Run with UX_GRID_TEST_DEPENDENCIES pointing to an installed legacy consumer.
+// No dependencies downloaded; creates a temporary bundle and isolated Chrome profile.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const http = require('http');
+const { spawn } = require('child_process');
+const webpack = require('webpack');
+const WebSocket = require('ws');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const root = path.resolve(__dirname, '../../..');
+const consumer = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!consumer) throw Error('Set UX_GRID_TEST_DEPENDENCIES to legacy consumer project');
+const output = fs.mkdtempSync(path.join(os.tmpdir(), 'ux-grid-renderer-browser-'));
+const chromePath = process.env.UX_GRID_TEST_CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+let chrome, server, ws;
+const results = {};
+const persist = () => fs.writeFileSync(path.join(output, 'results.json'), JSON.stringify(results, null, 2));
+const pending = new Map();
+let id = 0;
+function call(method, params = {}, sessionId) {
+  return new Promise((resolve, reject) => {
+    const requestId = ++id;
+    const timer = setTimeout(() => { pending.delete(requestId); reject(Error('CDP timeout: ' + method)); }, 60000);
+    pending.set(requestId, { resolve: result => { clearTimeout(timer); resolve(result); }, reject: error => { clearTimeout(timer); reject(error); } });
+    ws.send(JSON.stringify({ id: requestId, method, params, sessionId }));
+  });
+}
+(async () => {
+  const config = {
+    mode: 'development', devtool: false, entry: path.join(__dirname, 'browser-renderer-entry.js'),
+    output: { path: output, filename: 'bundle.js' },
+    resolve: { extensions: ['.js', '.vue', '.json'], alias: {
+      'vue$': require.resolve('vue/dist/vue.runtime.esm.js'),
+      'element-ui': path.join(consumer, 'node_modules/element-ui'),
+      'umy-table': path.join(consumer, 'node_modules/umy-table'),
+      'umy-ui': root
+    }, modules: [path.join(root, 'node_modules'), path.join(consumer, 'node_modules')] },
+    module: { rules: [
+      { test: /\.vue$/, loader: 'vue-loader' },
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.(woff|ttf)$/, loader: 'file-loader' }
+    ] }, plugins: [new VueLoaderPlugin(), new webpack.NormalModuleReplacementPlugin(/^xe-utils(?:\/.*)?$/, resource => {
+      if (resource.context.includes(path.join(consumer, 'node_modules/umy-table'))) resource.request = require.resolve(resource.request, { paths: [consumer] });
+    })], performance: { hints: false }
+  };
+  await new Promise((resolve, reject) => webpack(config, (error, stats) => error || stats.hasErrors() ? reject(error || Error(stats.toString({ all: false, errors: true }))) : resolve()));
+  server = http.createServer((request, response) => {
+    const asset = path.join(output, path.basename(request.url.split('?')[0]));
+    if (fs.existsSync(asset) && fs.statSync(asset).isFile()) { response.setHeader('Content-Type', request.url.endsWith('.js') ? 'application/javascript; charset=utf-8' : 'application/octet-stream'); fs.createReadStream(asset).pipe(response); }
+    else { response.setHeader('Content-Type', 'text/html; charset=utf-8'); response.end('<!doctype html><html><head><meta charset="utf-8"></head><body><script>window.bootErrors=[];window.onerror=function(m,u,l,c,e){bootErrors.push({message:m,url:u,line:l,stack:e&&e.stack})}</script><script src="/' + (request.url.includes('baseline=1') ? 'baseline.js' : 'bundle.js') + '"></script></body></html>'); }
+  });
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const endpoint = await new Promise((resolve, reject) => {
+    chrome = spawn(chromePath, ['--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check', '--remote-debugging-port=0', '--user-data-dir=' + path.join(output, 'profile'), 'about:blank']);
+    chrome.on('error', reject);
+    chrome.on('exit', code => reject(Error('Chrome exited: ' + code)));
+    chrome.stderr.on('data', data => { const match = String(data).match(/DevTools listening on (ws:\/\/[^\s]+)/); if (match) resolve(match[1]); });
+  });
+  ws = new WebSocket(endpoint);
+  await new Promise(resolve => ws.on('open', resolve));
+  ws.on('message', message => {
+    const data = JSON.parse(message);
+    if (pending.has(data.id)) { const entry = pending.get(data.id); pending.delete(data.id); data.error ? entry.reject(Error(JSON.stringify(data.error))) : entry.resolve(data.result); }
+  });
+
+  const assert = require('assert');
+  for (const version of ['legacy', 'current'].filter(value => !process.env.UX_GRID_TEST_VERSION || process.env.UX_GRID_TEST_VERSION === value)) {
+    const {targetId} = await call('Target.createTarget', {url:'about:blank'});
+    const {sessionId} = await call('Target.attachToTarget', {targetId,flatten:true});
+    await call('Emulation.setDeviceMetricsOverride',{width:1200,height:800,deviceScaleFactor:1,mobile:false},sessionId);
+    const evaluate = async expression => {
+      const result=await call('Runtime.evaluate',{expression,awaitPromise:true,returnByValue:true},sessionId);
+      if(result.exceptionDetails) throw Error(JSON.stringify(result.exceptionDetails));
+      return result.result.value;
+    };
+    const pause = () => evaluate('new Promise(resolve=>setTimeout(resolve,250))');
+    const click = async (selector,text,index=0,child) => {
+      const point=await evaluate('rendererTest.point('+JSON.stringify(selector)+','+(text===undefined?'undefined':JSON.stringify(text))+','+index+','+JSON.stringify(child)+')');
+      await call('Input.dispatchMouseEvent',{type:'mouseMoved',...point},sessionId);
+      await call('Input.dispatchMouseEvent',{type:'mousePressed',...point,button:'left',clickCount:1},sessionId);
+      await call('Input.dispatchMouseEvent',{type:'mouseReleased',...point,button:'left',clickCount:1},sessionId);
+      await pause();
+    };
+    const outside = async () => {
+      await call('Input.dispatchMouseEvent',{type:'mousePressed',x:1100,y:650,button:'left',clickCount:1},sessionId);
+      await call('Input.dispatchMouseEvent',{type:'mouseReleased',x:1100,y:650,button:'left',clickCount:1},sessionId);
+      await pause();
+    };
+    await call('Page.navigate',{url:'http://127.0.0.1:'+server.address().port+'/?legacy='+Number(version==='legacy')},sessionId);
+    for(let i=0;i<100;i++){if(await evaluate('Boolean(window.rendererTest)'))break;await new Promise(r=>setTimeout(r,100));}
+    results[version]={};
+    for(const kind of ['select','remote','multiple','cascader','cascaderMultiple','cascaderLazy','date','dateObject','datetime','dateRange','time','timeObject','timeAmPm','timeRange'].filter(value=>!process.env.UX_GRID_TEST_CASE||value===process.env.UX_GRID_TEST_CASE)){
+      const suite=results[version][kind]={};
+      suite.initial=await evaluate('rendererTest.mount('+JSON.stringify(kind)+','+(process.env.UX_GRID_TEST_MODERN !== '0')+')');
+      const popup=kind==='select'||kind==='remote'||kind==='multiple'?'.el-select-dropdown':kind.startsWith('cascader')?'.el-cascader__dropdown':kind.startsWith('date')?'.el-picker-panel':'.el-time-panel';
+      if(!await evaluate('rendererTest.hasVisible('+JSON.stringify(popup)+')')) await click(kind.endsWith('Range')?'tbody .el-date-editor':'tbody .el-input__inner');
+      if(kind==='remote') {
+        await call('Input.insertText',{text:'bet'},sessionId);
+        await evaluate('new Promise(resolve=>setTimeout(resolve,500))');
+        suite.queried=await evaluate('rendererTest.state()');persist();
+      }
+      await evaluate('rendererTest.resetCallbacks()');
+      if(kind==='select'||kind==='remote') await click('.el-select-dropdown__item','Beta');
+      if(kind==='multiple'){
+        await click('.el-select-dropdown__item','Zero');
+        await click('.el-select-dropdown__item','False');
+        const before=await evaluate('rendererTest.state()');
+        suite.beforeDisabled=before;
+        assert(before.focus.select,'multiple selection retains real input focus before disabled option click');
+        await click('.el-select-dropdown__item','Disabled');
+        const after=await evaluate('rendererTest.state()');
+        assert.deepStrictEqual(after.callbacks,before.callbacks,'disabled option is inert');
+      }
+      if(kind==='cascader'||kind==='cascaderLazy'){await click('.el-cascader-node__label','Parent');await click('.el-cascader-node__label','Child');}
+      if(kind==='cascaderMultiple'){
+        await click('.el-cascader-node__label','Parent');
+        await click('.el-cascader-node','Child',0,'.el-checkbox__input');
+        await click('.el-cascader-node','Other',0,'.el-checkbox__input');
+      }
+      if(kind==='date'||kind==='dateObject') await click('.el-date-table td.available:not(.prev-month):not(.next-month) span','19');
+      if(kind==='datetime'){
+        await click('.el-date-table td.available:not(.prev-month):not(.next-month) span','19');
+        await click('.el-picker-panel__footer button.is-plain');
+      }
+      if(kind==='dateRange'){
+        await click('.el-date-range-picker__content.is-left td.available:not(.prev-month):not(.next-month) span','20');
+        await click('.el-date-range-picker__content.is-left td.available:not(.prev-month):not(.next-month) span','22');
+      }
+      if(kind==='time'||kind==='timeObject'){
+        await click('.el-time-spinner__wrapper:first-child .el-time-spinner__item','14');
+        await click('.el-time-panel__btn.confirm');
+      }
+      if(kind==='timeAmPm'){
+        await click('.el-time-spinner__wrapper:first-child .el-time-spinner__item','02 PM');
+        await click('.el-time-panel__btn.confirm');
+      }
+      if(kind==='timeRange'){
+        await click('.el-time-range-picker__cell:first-child .el-time-spinner__wrapper:first-child .el-time-spinner__item','12');
+        await click('.el-time-panel__btn.confirm');
+      }
+      suite.selected=await evaluate('rendererTest.state()');persist();
+      const expected={select:'b',remote:'b',multiple:[0,false],cascader:['p','c'],cascaderLazy:['p','c'],cascaderMultiple:[2,3],date:'2026-09-19',datetime:'2026-09-19 13:24:56',dateRange:['2026-09-20','2026-09-22'],time:'14:24:56',timeAmPm:'02:24:56 PM',timeRange:['12:24:56','14:25:57']}[kind];
+      if(kind==='dateObject') {
+        assert.equal(suite.selected.valueType,'[object Date]');
+        assert.deepStrictEqual(suite.selected.dateParts,[2026,8,19,0,0,0]);
+      } else if(kind==='timeObject') {
+        assert.equal(suite.selected.valueType,'[object Date]');
+        assert.deepStrictEqual(suite.selected.dateParts.slice(3),[14,24,56]);
+      } else assert.deepStrictEqual(suite.selected.value,expected,version+' '+kind+' model');
+      assert(suite.selected.active,version+' '+kind+' popup click keeps edit active');
+      assert.equal(suite.selected.callbacks.filter(e=>e.type==='change').length,kind==='multiple'||kind==='cascaderMultiple'?2:1,'one change per chosen value');
+      assert.equal(suite.selected.validationCalls.length,kind==='multiple'||kind==='cascaderMultiple'?2:1,'one actual change validator per chosen value');
+      assert(suite.selected.validationCalls.every(item=>item.sameRow),'change validator receives original row');
+      assert(suite.selected.callbacks.filter(e=>e.sameRow!==undefined).every(e=>e.sameRow),'renderer callbacks retain row identity');
+      if(kind==='remote') {
+        assert(suite.selected.remoteQueries.some(query=>query.includes('bet')),'actual text input invokes remoteMethod');
+        await evaluate('rendererTest.clearRemoteOptions()');
+      }
+      if(kind==='cascaderLazy') assert(suite.selected.lazyCalls>0,'real cascader invokes asynchronous lazyLoad');
+      await outside();
+      suite.display=await evaluate('rendererTest.state()'); persist();
+      assert(!suite.display.active,'outside popup closes edit and renders label');
+      if(version==='current') {
+        const label={select:'Beta',remote:'Beta',multiple:'Zero, False',cascader:'Parent / Child',cascaderLazy:'Parent / Child',cascaderMultiple:'Parent / Child, Parent / Other',date:'2026-09-19',dateObject:'2026-09-19',datetime:'2026-09-19 13:24:56',dateRange:'2026-09-20 - 2026-09-22',time:'14:24:56',timeObject:'14:24:56',timeAmPm:'02:24:56 PM',timeRange:'12:24:56 - 14:25:57'}[kind];
+        assert(suite.display.text.includes(label),kind+' closed display retains correct label/time format');
+      }
+      if(kind==='cascaderLazy' && version==='legacy') {
+        assert.deepStrictEqual(suite.display.errors,[]);
+        console.log(version+' '+kind+' selection/display passed');
+        continue; // Legacy has no remount cache; current must verify its added restoration.
+      }
+      await evaluate('rendererTest.activate()');
+      if(kind==='cascaderLazy') {
+        const restored = await evaluate("document.querySelector('tbody .el-cascader input').value");
+        assert.equal(restored,'Parent / Child','lazy editor restores selected path on remount');
+      }
+      if(kind==='multiple') {
+        await evaluate('rendererTest.resetCallbacks()');
+        await click('tbody .el-tag__close');
+        suite.removed=await evaluate('rendererTest.state()');persist();
+        assert.deepStrictEqual(suite.removed.value,[false],'remove first selected tag');
+        assert.equal(suite.removed.callbacks.filter(e=>e.type==='change').length,1);
+      }
+      const input=await evaluate('rendererTest.point('+JSON.stringify(kind==='multiple'||kind==='cascaderMultiple'?'tbody .el-input__suffix':kind.endsWith('Range')?'tbody .el-date-editor':'tbody .el-input__inner')+')');
+      await call('Input.dispatchMouseEvent',{type:'mouseMoved',...input},sessionId);await pause();
+      await evaluate('rendererTest.resetCallbacks()');
+      await click('tbody .el-icon-circle-close');
+      suite.cleared=await evaluate('rendererTest.state()');persist();
+      const empty=kind==='multiple'||kind.startsWith('cascader')?[]:kind==='select'||kind==='remote'?'':null;
+      assert.deepStrictEqual(suite.cleared.value,empty,kind+' clears model');
+      assert(suite.cleared.active,kind+' clear preserves edit');
+      assert.equal(suite.cleared.callbacks.filter(e=>e.type==='change').length,1);
+      assert.equal(suite.cleared.validationCalls.length,1,'clear runs actual change validator');
+      assert.equal(suite.cleared.callbacks.filter(e=>e.type==='clear').length,kind==='select'||kind==='remote'||kind==='multiple'?1:0);
+      if(kind==='select') {
+        await evaluate('rendererTest.resetCallbacks()');
+        if(!await evaluate("rendererTest.hasVisible('.el-select-dropdown')")) await click('tbody .el-input__inner');
+        await click('.el-select-dropdown__item','Alpha');
+        suite.reselected=await evaluate('rendererTest.state()');persist();
+        assert.equal(suite.reselected.value,'a'); assert(suite.reselected.active);
+        assert.equal(suite.reselected.callbacks.filter(e=>e.type==='change').length,1);
+        assert.equal(suite.reselected.validationCalls.length,1);
+      }
+      if(kind==='cascaderLazy') {
+        await evaluate('rendererTest.resetCallbacks()');
+        if(!await evaluate("rendererTest.hasVisible('.el-cascader__dropdown')")) await click('tbody .el-input__inner');
+        await click('.el-cascader-node__label','Parent');
+        await click('.el-cascader-node__label','Child');
+        suite.reselected=await evaluate('rendererTest.state()');persist();
+        assert.deepStrictEqual(suite.reselected.value,['p','c']);
+        assert(suite.reselected.active);
+        assert.equal(suite.reselected.callbacks.filter(e=>e.type==='change').length,1);
+        assert.equal(suite.reselected.validationCalls.length,1);
+        assert.equal(suite.reselected.lazyCalls,suite.selected.lazyCalls,'remount reuses loaded children without refetch');
+      }
+      await outside();
+      suite.outside=await evaluate('rendererTest.state()');persist();
+      assert(!suite.outside.active,kind+' outside click closes edit');
+      assert.equal(suite.outside.callbacks.filter(e=>e.type==='edit-closed').length,1);
+      if(version==='current' && process.env.UX_GRID_TEST_MODERN !== '0') assert(suite.outside.modernCalls > 0,'modern business interceptor remains reachable on outside click');
+      assert.deepStrictEqual(suite.outside.errors,[]);
+      console.log(version+' '+kind+' passed');
+    }
+    if(!process.env.UX_GRID_TEST_CASE || process.env.UX_GRID_TEST_CASE==='filter') {
+      const suite=results[version].filter={};
+      await evaluate('rendererTest.mountFilter()');
+      await click('thead .elx-filter--btn,thead .vxe-filter--btn');
+      await click('.elx-table--filter-wrapper .el-input__inner,.vxe-table--filter-wrapper .el-input__inner');
+      await click('.el-select-dropdown__item','Beta');
+      suite.selected=await evaluate('rendererTest.filterState()');persist();
+      assert(suite.selected.open,'dropdown click keeps filter panel open');
+      assert.equal(suite.selected.callbacks.filter(e=>e.type==='change').length,1);
+      await click('.elx-table--filter-footer button:first-child,.vxe-table--filter-footer button:first-child');
+      suite.confirmed=await evaluate('rendererTest.filterState()');persist();
+      assert.deepStrictEqual(suite.confirmed.rows,[2]);
+      assert.deepStrictEqual(suite.confirmed.callbacks.find(e=>e.type==='filter-change').datas,['b']);
+      await click('thead .elx-filter--btn,thead .vxe-filter--btn');
+      const point=await evaluate("rendererTest.point('.elx-table--filter-wrapper .el-input__inner,.vxe-table--filter-wrapper .el-input__inner')");
+      await call('Input.dispatchMouseEvent',{type:'mouseMoved',...point},sessionId);await pause();
+      await click('.elx-table--filter-wrapper .el-icon-circle-close,.vxe-table--filter-wrapper .el-icon-circle-close');
+      suite.cleared=await evaluate('rendererTest.filterState()');persist();
+      if(version==='current') {
+        assert.equal(suite.cleared.options[0].pendingChecked,false,'clear itself cancels pending filter selection');
+        await click('.vxe-table--filter-footer button:first-child');
+      } else await click('.elx-table--filter-footer button:last-child');
+      suite.reset=await evaluate('rendererTest.filterState()');persist();
+      assert.deepStrictEqual(suite.reset.rows,[1,2]);
+      assert.equal(suite.reset.callbacks.filter(e=>e.type==='filter-change').length,2);
+      assert.deepStrictEqual(suite.reset.errors,[]);
+      console.log(version+' filter passed');
+    }
+    await call('Target.closeTarget',{targetId});
+  }
+  console.log('Result directory: '+output);persist();
+})().catch(error=>{results.failure=error.stack||String(error);persist();console.error(error);console.error('Result directory: '+output);process.exitCode=1;}).finally(()=>{
+  if(ws)ws.close();if(chrome)chrome.kill();if(server)server.close();
+  setTimeout(()=>process.exit(process.exitCode||0),500);
+});

package/packages/ux-grid/test/browser-renderer-entry.js

@@ -0,0 +1,129 @@
+/* Actual Element popup controls exercised by browser-renderer-contracts.cjs. */
+import 'babel-polyfill';
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import { interceptor } from 'vxe-table/lib/ui';
+Vue.use(Element);
+Vue.config.productionTip = false;
+window.testErrors = [];
+Vue.config.errorHandler = error => window.testErrors.push(error.stack || String(error));
+const legacy = new URLSearchParams(location.search).get('legacy') === '1';
+let Grid;
+if (legacy) {
+  const old = require('umy-table/lib/umy-table.common.js');
+  Vue.use(old.default || old);
+  Grid = Vue.options.components.UxGrid;
+  require('umy-table/lib/theme-chalk/index.css');
+} else {
+  Grid = require('../src/ux-grid.vue').default;
+  require('../../../lib/theme-chalk/ux-grid.css');
+}
+const delay = (ms = 120) => new Promise(resolve => setTimeout(resolve, ms));
+let vm;
+let callbacks;
+let modernCalls = 0;
+let lazyCalls = 0;
+let remoteQueries = [];
+let validationCalls = [];
+let currentRenderOpts;
+const modern = () => { modernCalls++; };
+const definitions = {
+  select: { value: 'a', name: 'ElSelect', props: { clearable: true }, options: [{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }] },
+  remote: { value: 'a', name: 'ElSelect', props: { clearable: true, filterable: true, remote: true }, options: [{ value: 'a', label: 'Alpha' }] },
+  multiple: { value: [], name: 'ElSelect', props: { multiple: true, clearable: true }, optionProps: { value: 'id', label: 'text' }, optionGroupProps: { label: 'title', options: 'items' }, optionGroups: [{ title: 'Values', items: [{ id: 0, text: 'Zero' }, { id: false, text: 'False' }, { id: 2, text: 'Disabled', disabled: true }] }] },
+  cascader: { value: [], name: 'ElCascader', props: { clearable: true, options: [{ value: 'p', label: 'Parent', children: [{ value: 'c', label: 'Child' }, { value: 'o', label: 'Other' }] }] } },
+  cascaderMultiple: { value: [], name: 'ElCascader', props: { clearable: true, props: { multiple: true, emitPath: false, value: 'id', label: 'text', children: 'nodes' }, options: [{ id: 1, text: 'Parent', nodes: [{ id: 2, text: 'Child' }, { id: 3, text: 'Other' }] }] } },
+  cascaderLazy: { value: [], name: 'ElCascader', props: { clearable: true, props: { lazy: true, lazyLoad(node, resolve) { lazyCalls++; setTimeout(() => resolve(node.level ? [{ value: 'c', label: 'Child', leaf: true }] : [{ value: 'p', label: 'Parent', leaf: false }]), 20); } }, options: [{ value: 'p', label: 'Parent', leaf: false }] } },
+  date: { value: '2026-09-17', name: 'ElDatePicker', props: { type: 'date', valueFormat: 'yyyy-MM-dd', clearable: true } },
+  dateObject: { value: new Date(2026, 8, 17), name: 'ElDatePicker', props: { type: 'date', clearable: true } },
+  dateRange: { value: ['2026-09-17', '2026-09-19'], name: 'ElDatePicker', props: { type: 'daterange', valueFormat: 'yyyy-MM-dd', clearable: true } },
+  datetime: { value: '2026-09-17 13:24:56', name: 'ElDatePicker', props: { type: 'datetime', valueFormat: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss', clearable: true } },
+  time: { value: '13:24:56', name: 'ElTimePicker', props: { valueFormat: 'HH:mm:ss', format: 'HH:mm:ss', clearable: true } },
+  timeObject: { value: new Date(2026, 8, 17, 13, 24, 56), name: 'ElTimePicker', props: { format: 'HH:mm:ss', clearable: true } },
+  timeAmPm: { value: '01:24:56 PM', name: 'ElTimePicker', props: { valueFormat: 'hh:mm:ss A', format: 'hh:mm:ss A', clearable: true } },
+  timeRange: { value: ['13:24:56', '14:25:57'], name: 'ElTimePicker', props: { isRange: true, valueFormat: 'HH:mm:ss', format: 'HH:mm:ss', clearable: true } }
+};
+function visible(element) {
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0 && getComputedStyle(element).visibility !== 'hidden' && getComputedStyle(element).display !== 'none';
+}
+window.rendererTest = {
+  async mount(kind, withModern = false) {
+    if (vm) { vm.$destroy(); vm.$el.remove(); }
+    interceptor.delete('event.clearEdit', modern);
+    if (withModern && !legacy) interceptor.add('event.clearEdit', modern);
+    modernCalls = 0; lazyCalls = 0; remoteQueries = []; callbacks = []; validationCalls = [];
+    const definition = definitions[kind];
+    const row = { id: 1, value: Array.isArray(definition.value) ? definition.value.slice() : definition.value };
+    const renderOpts = Object.assign({}, definition, { events: {
+      input(params, value) { callbacks.push({ type: 'input', value, sameRow: params.row === row, current: row.value }); },
+      change(params, value) { callbacks.push({ type: 'change', value, sameRow: params.row === row, current: row.value }); },
+      clear(params) { callbacks.push({ type: 'clear', sameRow: params.row === row }); }
+    } });
+    delete renderOpts.value;
+    if (kind === 'remote') {
+      renderOpts.options = definition.options.slice();
+      renderOpts.props = Object.assign({}, definition.props, { remoteMethod(query) {
+        remoteQueries.push(query);
+        setTimeout(() => {
+          renderOpts.options.splice(0, renderOpts.options.length, ...(query ? [{ value: 'b', label: 'Beta' }] : []));
+        }, 20);
+      } });
+    }
+    Vue.observable(renderOpts);
+    currentRenderOpts = renderOpts;
+    vm = new Vue({ render(h) { return h(Grid, { ref: 'grid', props: {
+      height: 260, rowId: 'id', data: [row], editConfig: { mode: 'cell', trigger: 'click' },
+      rules: { value: [{ trigger: 'change', validator(params) { validationCalls.push({ value: params.cellValue, sameRow: params.row === row }); } }] },
+      columns: [{ field: 'value', title: kind, width: 380, editRender: renderOpts }, { field: 'id', title: 'ID', width: 100 }]
+    } }); } }).$mount();
+    document.body.appendChild(vm.$el); await delay(300);
+    this.wrapper = vm.$refs.grid; this.kernel = this.wrapper.tableExample(); this.row = row;
+    this.wrapper.$on('edit-closed', () => callbacks.push({ type: 'edit-closed' }));
+    this.wrapper.setActiveCell(row, 'value'); await delay(160);
+    return this.state();
+  },
+  point(selector, text, index = 0, child) {
+    const elements = Array.from(document.querySelectorAll(selector)).filter(element => visible(element) && (text === undefined || element.textContent.trim() === text));
+    const matched = elements[index];
+    const element = child && matched ? matched.querySelector(child) : matched;
+    if (!element) throw Error('No visible control: ' + selector + ' text=' + text + ' index=' + index);
+    const rect = element.getBoundingClientRect();
+    return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+  },
+  hasVisible(selector) { return Array.from(document.querySelectorAll(selector)).some(visible); },
+  async state() {
+    await delay();
+    const value = this.row.value;
+    const dateParts = value instanceof Date ? [value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes(), value.getSeconds()] : null;
+    const focused = document.activeElement;
+    return { value, dateParts, valueType: Object.prototype.toString.call(value), active: this.wrapper.isActiveByRow(this.row), callbacks: callbacks.slice(), validationCalls: validationCalls.slice(), focus: { tag: focused && focused.tagName, select: !!(focused && focused.closest && focused.closest('.el-select')) }, modernCalls, lazyCalls, remoteQueries: remoteQueries.slice(), text: vm.$el.textContent, errors: window.testErrors.slice() };
+  },
+  resetCallbacks() { callbacks.length = 0; validationCalls.length = 0; },
+  async activate() { this.wrapper.setActiveCell(this.row, 'value'); await delay(160); },
+  async clearRemoteOptions() { currentRenderOpts.options.splice(0); await delay(); },
+  async mountFilter() {
+    if (vm) { vm.$destroy(); vm.$el.remove(); }
+    callbacks = [];
+    const rows = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }];
+    vm = new Vue({ render(h) { return h(Grid, { ref: 'grid', props: {
+      height: 260, data: rows,
+      columns: [{ field: 'value', title: 'Filter', width: 380, filters: [{ value: 'picked', data: null }], filterRender: {
+        name: 'ElSelect', props: { clearable: true }, options: [{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }],
+        events: { input(params, value) { callbacks.push({ type: 'input', value }); }, change(params, value) { callbacks.push({ type: 'change', value }); } }
+      } }, { field: 'id', width: 100 }]
+    } }); } }).$mount();
+    document.body.appendChild(vm.$el); await delay(300);
+    this.wrapper = vm.$refs.grid; this.kernel = this.wrapper.tableExample();
+    this.wrapper.$on('filter-change', payload => callbacks.push({ type: 'filter-change', values: payload.values, datas: payload.datas }));
+  },
+  async filterState() {
+    await delay();
+    return { rows: this.wrapper.getTableData().visibleData.map(row => row.id),
+      open: this.hasVisible('.elx-table--filter-wrapper,.vxe-table--filter-wrapper'),
+      options: this.wrapper.getColumnByField('value').filters.map(option=>({ data: option.data, checked: option.checked, pendingChecked: option._checked })),
+      callbacks: callbacks.slice(), errors: window.testErrors.slice() };
+  },
+  removeModern() { interceptor.delete('event.clearEdit', modern); }
+};

package/packages/ux-grid/test/browser-resize-contracts.cjs

@@ -0,0 +1,150 @@
+// E08 real Chrome pointer drag against old/new kernels, plain and fixed headers.
+// No mocked emissions or private resize handler calls.
+// Run with UX_GRID_TEST_DEPENDENCIES pointing to an installed legacy consumer.
+// No dependencies downloaded; creates a temporary bundle and isolated Chrome profile.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const http = require('http');
+const { spawn } = require('child_process');
+const webpack = require('webpack');
+const WebSocket = require('ws');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const root = path.resolve(__dirname, '../../..');
+const consumer = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!consumer) throw Error('Set UX_GRID_TEST_DEPENDENCIES to legacy consumer project');
+const output = fs.mkdtempSync(path.join(os.tmpdir(), 'ux-grid-browser-'));
+const chromePath = process.env.UX_GRID_TEST_CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+let chrome, server, ws;
+const results = {};
+const persist = () => fs.writeFileSync(path.join(output, 'results.json'), JSON.stringify(results, null, 2));
+const pending = new Map();
+let id = 0;
+function call(method, params = {}, sessionId) {
+  return new Promise((resolve, reject) => {
+    const requestId = ++id;
+    const timer = setTimeout(() => { pending.delete(requestId); reject(Error('CDP timeout: ' + method)); }, 60000);
+    pending.set(requestId, { resolve: result => { clearTimeout(timer); resolve(result); }, reject: error => { clearTimeout(timer); reject(error); } });
+    ws.send(JSON.stringify({ id: requestId, method, params, sessionId }));
+  });
+}
+(async () => {
+  const config = {
+    mode: 'development', devtool: false, entry: path.join(__dirname, 'browser-entry.js'),
+    output: { path: output, filename: 'bundle.js' },
+    resolve: { extensions: ['.js', '.vue', '.json'], alias: {
+      'vue$': require.resolve('vue/dist/vue.runtime.esm.js'),
+      'element-ui': path.join(consumer, 'node_modules/element-ui'),
+      'umy-table': path.join(consumer, 'node_modules/umy-table'),
+      'umy-ui': root
+    }, modules: [path.join(root, 'node_modules'), path.join(consumer, 'node_modules')] },
+    module: { rules: [
+      { test: /\.vue$/, loader: 'vue-loader' },
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.(woff|ttf)$/, loader: 'file-loader' }
+    ] }, plugins: [new VueLoaderPlugin(), new webpack.NormalModuleReplacementPlugin(/^xe-utils(?:\/.*)?$/, resource => {
+      if (resource.context.includes(path.join(consumer, 'node_modules/umy-table'))) resource.request = require.resolve(resource.request, { paths: [consumer] });
+    })], performance: { hints: false }
+  };
+  await new Promise((resolve, reject) => webpack(config, (error, stats) => error || stats.hasErrors() ? reject(error || Error(stats.toString({ all: false, errors: true }))) : resolve()));
+  server = http.createServer((request, response) => {
+    const asset = path.join(output, path.basename(request.url.split('?')[0]));
+    if (fs.existsSync(asset) && fs.statSync(asset).isFile()) { response.setHeader('Content-Type', request.url.endsWith('.js') ? 'application/javascript; charset=utf-8' : 'application/octet-stream'); fs.createReadStream(asset).pipe(response); }
+    else { response.setHeader('Content-Type', 'text/html; charset=utf-8'); response.end('<!doctype html><html><head><meta charset="utf-8"></head><body><script>window.bootErrors=[];window.onerror=function(m,u,l,c,e){bootErrors.push({message:m,url:u,line:l,stack:e&&e.stack})}</script><script src="/' + (request.url.includes('baseline=1') ? 'baseline.js' : 'bundle.js') + '"></script></body></html>'); }
+  });
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const endpoint = await new Promise((resolve, reject) => {
+    chrome = spawn(chromePath, ['--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check', '--remote-debugging-port=0', '--user-data-dir=' + path.join(output, 'profile'), 'about:blank']);
+    chrome.on('error', reject);
+    chrome.on('exit', code => reject(Error('Chrome exited: ' + code)));
+    chrome.stderr.on('data', data => { const match = String(data).match(/DevTools listening on (ws:\/\/[^\s]+)/); if (match) resolve(match[1]); });
+  });
+  ws = new WebSocket(endpoint);
+  await new Promise(resolve => ws.on('open', resolve));
+  ws.on('message', message => {
+    const data = JSON.parse(message);
+    if (pending.has(data.id)) { const entry = pending.get(data.id); pending.delete(data.id); data.error ? entry.reject(Error(JSON.stringify(data.error))) : entry.resolve(data.result); }
+  });
+  for (const version of ['legacy', 'current']) for (const fixed of [false, true]) {
+    const legacy = version === 'legacy';
+    const { targetId } = await call('Target.createTarget', { url: 'about:blank' });
+    const { sessionId } = await call('Target.attachToTarget', { targetId, flatten: true });
+    await call('Emulation.setDeviceMetricsOverride', { width: 1200, height: 800, deviceScaleFactor: 1, mobile: false }, sessionId);
+    const evaluate = async expression => {
+      const result = await call('Runtime.evaluate', { expression, awaitPromise: true, returnByValue: true }, sessionId);
+      if (result.exceptionDetails) throw Error(JSON.stringify(result.exceptionDetails));
+      return result.result.value;
+    };
+    await call('Page.navigate', { url: 'http://127.0.0.1:' + server.address().port + '/?legacy=' + Number(legacy) + '&baseline=' + Number(version === 'baseline') }, sessionId);
+    for (let attempt = 0; attempt < 100; attempt++) {
+      if (await evaluate('Boolean(window.acceptance)')) break;
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    const suite = results[version + (fixed ? ':fixed-left' : ':plain')] = {};
+    console.log('boot errors:', await evaluate('window.bootErrors'));
+
+    {
+      suite.mount = await evaluate('acceptance.mount(20)');
+      suite.prepare = await evaluate(`(async () => {
+        await wrapper.loadColumn([{field:'name', title:'Resize', width:200, resizable:true${fixed ? ", fixed:'left'" : ''}}, {field:'amount', width:${fixed ? 1600 : 160}}]);
+        await new Promise(r => setTimeout(r, 400));
+        window.resizeTrace = [];
+        window.resizePayloads = [];
+        window.resizeColumn = wrapper.getColumnByField('name');
+        document.addEventListener('mouseup', e => { window.resizeUp = e; resizeTrace.push('mouseup-capture'); }, true);
+        wrapper.$on('header-dragend', p => {
+          resizeTrace.push('header-dragend');
+          resizePayloads.push({ keys:Object.keys(p).sort(), field:p.column.field || p.column.property,
+            sameColumn:p.column === resizeColumn, sameEvent:p.$event === resizeUp,
+            eventType:p.$event && p.$event.type, columnIndex:p.columnIndex, $columnIndex:p.$columnIndex,
+            $rowIndex:p.$rowIndex, fixed:p.fixed, fixedType:typeof p.fixed, isHidden:p.isHidden, hiddenType:typeof p.isHidden, width:p.column.renderWidth });
+        });
+        const handle = document.querySelector(${JSON.stringify(fixed ? '.vxe-table--fixed-left-wrapper .vxe-cell--col-resizable, .elx-table--fixed-left-wrapper .elx-resizable' : '.vxe-cell--col-resizable, .elx-resizable')});
+        if (!handle) throw Error('Resize handle absent: ' + document.querySelector('thead').innerHTML);
+        const rect = handle.getBoundingClientRect();
+        return {x:rect.x+1, y:rect.y+rect.height/2, width:resizeColumn.renderWidth, handle:handle.className, target:document.elementFromPoint(rect.x+1,rect.y+rect.height/2).className};
+      })()`);
+      await call('Input.dispatchMouseEvent', {type:'mouseMoved', x:suite.prepare.x, y:suite.prepare.y}, sessionId);
+      await call('Input.dispatchMouseEvent', {type:'mousePressed', x:suite.prepare.x, y:suite.prepare.y, button:'left', clickCount:1}, sessionId);
+      for (const dx of [20,40,60]) await call('Input.dispatchMouseEvent', {type:'mouseMoved', x:suite.prepare.x+dx, y:suite.prepare.y, button:'left', buttons:1}, sessionId);
+      await call('Input.dispatchMouseEvent', {type:'mouseReleased', x:suite.prepare.x+60, y:suite.prepare.y, button:'left', clickCount:1}, sessionId);
+      suite.resize = await evaluate(`new Promise(resolve => setTimeout(() => resolve({trace:resizeTrace, events:resizePayloads, width:resizeColumn.renderWidth, errors:testErrors}),700))`);
+      const assert = require('assert');
+      assert.equal(suite.resize.events.length, 1);
+      const event = suite.resize.events[0];
+      assert(event.sameColumn && event.sameEvent);
+      assert.equal(event.eventType, 'mouseup');
+      if (fixed) { assert.equal(event.fixed, 'left'); assert.strictEqual(event.isHidden, false); }
+      else { assert(!event.fixed); assert(!event.isHidden); }
+      assert.equal(event.columnIndex, 0); assert.equal(event.$columnIndex, 0); assert.equal(event.$rowIndex, 0);
+      assert.deepStrictEqual(event.keys, ['$columnIndex','$event','$rowIndex','column','columnIndex','fixed','isHidden'].sort());
+      assert.equal(suite.resize.width, suite.prepare.width + 60);
+      assert.equal(event.width, suite.resize.width);
+      assert(suite.prepare.target.includes('resizable'), 'pointer hits actual resize handle');
+      assert.deepStrictEqual(suite.resize.trace, ['mouseup-capture','header-dragend']);
+      assert.deepStrictEqual(suite.resize.errors, []);
+      console.log(version + (fixed ? ':fixed-left' : ':plain') + ' resize: ' + JSON.stringify(suite));
+      persist();
+      await call('Target.closeTarget', {targetId});
+      continue;
+    }
+
+  }
+  for (const fixed of [false, true]) {
+    const suffix = fixed ? ':fixed-left' : ':plain';
+    const old = results['legacy' + suffix].resize;
+    const current = results['current' + suffix].resize;
+    const normalize = result => ({ ...result, events: result.events.map(event => ({
+      ...event, fixed:event.fixed || null, isHidden:!!event.isHidden, fixedType:undefined, hiddenType:undefined
+    })) });
+    require('assert').deepStrictEqual(normalize(current), normalize(old), suffix + ' semantic event contract');
+  }
+  console.log('Result directory: ' + output);
+  persist();
+})().catch(error => { results.failure = error.stack || String(error); persist(); console.error(error); console.error('Result directory: ' + output); process.exitCode = 1; }).finally(() => {
+  if (ws) ws.close();
+  if (chrome) chrome.kill();
+  if (server) server.close();
+  setTimeout(() => process.exit(process.exitCode || 0), 500);
+});