umy-ui-table 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umy-ui-table",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "一个基于 vue 的 PC 端表格UI库，解决万级数据渲染卡顿问题，过万数据点击全选卡顿，等等问题",
   "author": {
     "name": "foriacus"

package/packages/ux-grid/src/element-renderer.js

@@ -304,6 +304,17 @@ function sameCascaderIdentity(left, right) {
   return left.length === right.length && left.every((value, index) => value === right[index]);
 }
 
+function getCascaderRenderIdentity(options, config, identity = []) {
+  if (!Array.isArray(options)) return identity;
+  identity.push(options, options.length);
+  options.forEach((option) => {
+    identity.push(option);
+    Object.keys(option).forEach((key) => identity.push(key, option[key]));
+    getCascaderRenderIdentity(option[config.children || "children"], config, identity);
+  });
+  return identity;
+}
+
 function getCascaderCache(params, create, renderOpts) {
   if (!params || !params.row || !params.column) return;
   let columns = cascaderLabelCache.get(params.row);
@@ -430,7 +441,21 @@ function cascaderEditRender(h, renderOpts, params) {
     // hook runs in that same mount turn, before asynchronous results can arrive.
     const hooks = nodes[0].data.hook || {};
     const onInsert = hooks.insert;
+    const onPrepatch = hooks.prepatch;
+    nodes[0].data.umyCascaderCache = cache;
+    nodes[0].data.umyCascaderOptionsIdentity = getCascaderRenderIdentity(props.options || renderOpts.options, config);
     nodes[0].data.hook = Object.assign({}, hooks, {
+      prepatch(oldVnode, vnode) {
+        // Hydration is for a new editor. Feeding newly loaded children back as
+        // options into the same live Element panel resets its store/expanded
+        // menus on an unrelated table render (e.g. popup mousedown).
+        // Genuine external option edits must still reach the panel unchanged.
+        if (oldVnode.data.umyCascaderCache === cache &&
+          sameCascaderIdentity(oldVnode.data.umyCascaderOptionsIdentity || [], vnode.data.umyCascaderOptionsIdentity)) {
+          vnode.componentOptions.propsData.options = oldVnode.componentOptions.propsData.options;
+        }
+        if (onPrepatch) onPrepatch.apply(this, arguments);
+      },
       insert(...args) {
         if (onInsert) onInsert.apply(this, args);
         pendingMountRequests.forEach((request) => {

package/packages/ux-grid/src/grid-height.js

@@ -54,12 +54,22 @@ export function observeGridHeight(vm) {
   // Pagination can appear/disappear after mount; updated() reconnects when its
   // element identity changes. Root observation also covers hidden -> visible.
   const pager = vm.$refs.myPagination;
-  if (pager) observer.observe(pager);
+  if (pager) observer.observe(pager, { box: "border-box" });
   const view = root.ownerDocument.defaultView;
+  // Native ResizeObserver supports border-box; older polyfills ignore it.
+  // Padding/border-only changes still change offsetHeight in that fallback.
+  const pagerObserver = pager && view && view.MutationObserver
+    ? new view.MutationObserver(() => vm.scheduleHeight())
+    : null;
+  if (pagerObserver) pagerObserver.observe(pager, {
+    attributes: true, attributeFilter: ["style", "class"], childList: true,
+    characterData: true, subtree: true
+  });
   const onResize = () => vm.scheduleHeight();
   if (view) view.addEventListener("resize", onResize);
   return () => {
     observer.disconnect();
+    if (pagerObserver) pagerObserver.disconnect();
     if (view) view.removeEventListener("resize", onResize);
   };
 }

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

@@ -0,0 +1,105 @@
+// Real Chrome geometry, not jsdom. Uses only installed dependencies, isolated assets/profile.
+const fs = require('fs'), os = require('os'), path = require('path'), http = require('http');
+const { spawn } = require('child_process');
+const assert = require('assert');
+const webpack = require('webpack'), 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');
+const output = fs.mkdtempSync(path.join(os.tmpdir(), 'ux-grid-layout-browser-'));
+const results = {};
+results.observerMode = process.env.UX_GRID_LAYOUT_POLYFILL === '1' ? 'polyfill' : 'native';
+results.manifestVersion = require('vxe-table/package.json').version;
+let chrome, server, ws, nextId = 0;
+const pending = new Map();
+function call(method, params = {}, sessionId) {
+  return new Promise((resolve, reject) => {
+    const id = ++nextId, timer = setTimeout(() => { pending.delete(id); reject(Error('Timeout: ' + method)); }, 60000);
+    pending.set(id, { resolve: result => { clearTimeout(timer); resolve(result); }, reject: error => { clearTimeout(timer); reject(error); } });
+    ws.send(JSON.stringify({ id, method, params, sessionId }));
+  });
+}
+function check(m, limit, exact = true) {
+  assert.deepStrictEqual(m.errors, []);
+  assert(m.table.height > 0 && m.body.height > 0, 'actual table/body visible');
+  const end = m.pager ? m.pager.bottom : m.table.bottom;
+  if (m.pager) assert(m.table.bottom <= m.pager.top + 1, 'pager overlaps table');
+  assert(end <= m.root.top + limit + 1, 'height budget exceeded: ' + JSON.stringify(m));
+  if (exact) assert(Math.abs(m.root.height - limit) <= 1, 'root height differs');
+  if (exact) assert(Math.abs(end - (m.root.bottom - m.bottomInset)) <= 1, 'unused height budget');
+  assert(m.calls < 30, 'unbounded observer callbacks');
+}
+(async () => {
+  await new Promise((resolve, reject) => webpack({ mode:'development', devtool:false,
+    entry:path.join(__dirname, 'browser-layout-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-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()], performance:{hints:false}
+  }, (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));
+    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>' + (results.observerMode === 'polyfill' ? 'window.ResizeObserver=undefined;' : '') + 'window.bootErrors=[];window.onerror=function(m,u,l,c,e){bootErrors.push(String(e&&e.stack||m))}</script><script src="/bundle.js"></script></body></html>'); }
+  });
+  await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0,'127.0.0.1',resolve); });
+  const endpoint = await new Promise((resolve, reject) => {
+    chrome = spawn(process.env.UX_GRID_TEST_CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', ['--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 m = String(data).match(/DevTools listening on (ws:\/\/[^\s]+)/); if(m) resolve(m[1]); });
+  });
+  ws = new WebSocket(endpoint); await new Promise(resolve => ws.on('open',resolve));
+  ws.on('message',message => { const data = JSON.parse(message), entry = pending.get(data.id); if(entry) { pending.delete(data.id); data.error ? entry.reject(Error(JSON.stringify(data.error))) : entry.resolve(data.result); } });
+  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:900,deviceScaleFactor:1,mobile:false},sessionId);
+  const evaluate = async expression => { const r = await call('Runtime.evaluate',{expression,awaitPromise:true,returnByValue:true},sessionId); if(r.exceptionDetails) throw Error(JSON.stringify(r.exceptionDetails)); return r.result.value; };
+  await call('Page.navigate',{url:'http://127.0.0.1:' + server.address().port},sessionId);
+  for(let i=0;i<100;i++) { if(await evaluate('Boolean(window.layout)')) break; await new Promise(resolve=>setTimeout(resolve,100)); }
+  results.boot = await evaluate('window.bootErrors'); console.log('boot',results.boot);
+  assert.deepStrictEqual(results.boot, []);
+  for(const [name,config,limit,exact] of [
+    ['numeric',{height:400},400,true], ['px',{height:'400px'},400,true],
+    ['percent',{height:'80%'},400,true], ['auto',{height:'auto'},500,true],
+    ['calc',{height:'calc(100% - 100px)'},400,true],
+    ['border-box',{height:400,rootStyle:{boxSizing:'border-box',padding:'10px',border:'2px solid red'}},400,true],
+    ['flex',{height:'100%',parent:{display:'flex',flexDirection:'column'}},500,true],
+    ['grid',{height:'100%',parent:{display:'grid',gridTemplateRows:'500px'}},500,true],
+    ['flex-header',{height:'auto',parent:{display:'flex',flexDirection:'column'},sibling:{height:'100px',flex:'none'},rootStyle:{flex:'1',minHeight:0}},400,true],
+    ['flex-two-grow',{height:'50%',parent:{display:'flex',flexDirection:'column'},sibling:{height:'50%',flex:'1',minHeight:0},rootStyle:{flex:'1',minHeight:0}},250,true],
+    ['grid-second-track',{height:'100%',parent:{display:'grid',gridTemplateRows:'100px 1fr'},sibling:{},rootStyle:{minHeight:0}},400,true],
+    ['grid-second-track-half',{height:'50%',parent:{display:'grid',gridTemplateRows:'100px 1fr'},sibling:{},rootStyle:{minHeight:0}},200,true],
+    ['max-many',{maxHeight:'80%'},400,false], ['max-few',{maxHeight:'80%',rows:1},400,false],
+    ['max-calc',{maxHeight:'calc(100% - 100px)'},400,false], ['no-pager',{height:400,pager:false},400,true]
+  ]) { const m = results[name] = await evaluate('layout.mount(' + JSON.stringify(config) + ')'); check(m,limit,exact); console.log('PASS ' + name); }
+  assert(results['max-few'].root.height < results['max-many'].root.height - 100, 'maxHeight preserves short content natural height');
+  results.priority = await evaluate('layout.mount({height:400,maxHeight:200})'); check(results.priority,400); assert.strictEqual(results.priority.maxHeight,null);
+  results.fallbackMax = await evaluate('layout.patch({height:null})'); check(results.fallbackMax,200,false); assert.strictEqual(results.fallbackMax.maxHeight,200-results.fallbackMax.pager.height);
+  results.resizeMount = await evaluate('layout.mount({height:"80%"})');
+  results.resize = await evaluate('layout.patch({parent:{height:"600px"}})'); check(results.resize,480);
+  results.pagerOff = await evaluate('layout.patch({pager:false})'); check(results.pagerOff,480);
+  results.pagerOn = await evaluate('layout.patch({pager:true})'); check(results.pagerOn,480);
+  results.pagerSize = await evaluate('layout.pagerSize()'); check(results.pagerSize,480);
+  assert(results.pagerSize.pager.height > results.pagerOn.pager.height && results.pagerSize.table.height < results.pagerOn.table.height);
+  results.pagerShrink = await evaluate('layout.pagerSize(0)'); check(results.pagerShrink,480); assert.strictEqual(results.pagerShrink.table.height,results.pagerOn.table.height);
+  if (results.observerMode === 'native') {
+    results.parentTheme = await evaluate('layout.parentTheme(true)'); check(results.parentTheme,480); assert(results.parentTheme.pager.height > results.pagerOn.pager.height);
+    results.parentThemeReset = await evaluate('layout.parentTheme(false)'); check(results.parentThemeReset,480);
+  }
+  await evaluate('layout.hide(true)'); results.show = await evaluate('layout.hide(false)'); check(results.show,480);
+  results.deactivated = await evaluate('layout.active(false)'); assert(!results.deactivated.observing);
+  results.inactiveMutation = await evaluate('layout.inactiveMutation()'); assert.strictEqual(results.inactiveMutation,0);
+  results.activated = await evaluate('layout.active(true)'); check(results.activated,480);
+  results.stable = await evaluate('layout.stable()'); assert(results.stable.delta <= 2);
+  results.clearHeight = await evaluate('layout.patch({height:null})'); assert.strictEqual(results.clearHeight.height,null); assert(!results.clearHeight.observing);
+  results.destroyed = await evaluate('layout.destroy()'); assert.deepStrictEqual(results.destroyed,{delta:0,scheduleDelta:0,observing:false});
+  results.natural = await evaluate('layout.mount({height:"100%",rows:2,parent:{height:"auto"}})'); assert.strictEqual(results.natural.height,null); assert(results.natural.observing);
+  results.naturalStable = await evaluate('layout.stable()'); assert(results.naturalStable.delta <= 2);
+  results.naturalDestroyed = await evaluate('layout.destroy()'); assert.deepStrictEqual(results.naturalDestroyed,{delta:0,scheduleDelta:0,observing:false});
+  results.finalErrors = await evaluate('({boot:window.bootErrors,vue:window.layoutErrors})'); assert.deepStrictEqual(results.finalErrors,{boot:[],vue:[]});
+  console.log('PASS lifecycle/resize/pager/stability/destruction');
+})().catch(error => { results.failure = error.stack || String(error); console.error(error); process.exitCode=1; }).finally(() => {
+  fs.writeFileSync(path.join(output,'results.json'),JSON.stringify(results,null,2)); console.log('Result directory: ' + output);
+  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-layout-entry.js

@@ -0,0 +1,66 @@
+import 'babel-polyfill';
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import Grid from '../src/ux-grid.vue';
+import { version as runtimeVersion } from 'vxe-table/lib/ui';
+import '../../../lib/theme-chalk/ux-grid.css';
+Vue.use(Element);
+window.layoutErrors = [];
+Vue.config.errorHandler = error => layoutErrors.push(String(error.stack || error));
+const theme = document.createElement('style');
+theme.textContent = '.layout-padded-pager .myPagination { padding-block: 12px !important; }';
+document.head.appendChild(theme);
+const wait = (ms = 350) => new Promise(resolve => setTimeout(resolve, ms));
+const rect = el => {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return { top: r.top, bottom: r.bottom, height: r.height, width: r.width };
+};
+let vm, wrapper, calls, schedules;
+window.layout = {
+  async mount(config) {
+    if (vm) { vm.$destroy(); vm.$el.remove(); }
+    calls = 0;
+    schedules = 0;
+    vm = new Vue({
+      data: () => ({ config, active: true, hidden: false }),
+      render(h) {
+        const c = this.config;
+        return h('div', { style: Object.assign({ width: '800px', height: '500px' }, c.parent, this.hidden ? { display: 'none' } : {}) }, [
+          c.sibling ? h('div', { style: c.sibling }, ['Sibling']) : null,
+          h('keep-alive', [this.active ? h(Grid, { ref: 'grid', style: c.rootStyle || {}, props: {
+            data: Array.from({ length: c.rows === undefined ? 100 : c.rows }, (_, i) => ({ id: i, name: 'Row ' + i })),
+            columns: [{ field: 'name', title: 'Name', width: 160 }], height: c.height, maxHeight: c.maxHeight,
+            paginationShow: c.pager !== false, total: 100, pageSize: 10
+          } }) : h('div')])
+        ]);
+      }
+    }).$mount();
+    document.body.appendChild(vm.$el);
+    wrapper = vm.$refs.grid;
+    const original = wrapper.setHeight;
+    wrapper.setHeight = function () { calls++; return original.apply(this, arguments); };
+    const schedule = wrapper.scheduleHeight;
+    wrapper.scheduleHeight = function () { schedules++; return schedule.apply(this, arguments); };
+    await wait();
+    return this.measure();
+  },
+  measure() {
+    const root = wrapper.$el;
+    const style = getComputedStyle(root);
+    return { root: rect(root), parent: rect(vm.$el), table: rect(wrapper.$refs.singleTable.$el),
+      body: rect(root.querySelector('.vxe-table--main-wrapper .vxe-table--body-wrapper')),
+      pager: rect(wrapper.$refs.myPagination), height: wrapper.newHeight, maxHeight: wrapper.newMaxHeight,
+      bottomInset: parseFloat(style.paddingBottom) + parseFloat(style.borderBottomWidth),
+      runtimeVersion, calls, observing: !!wrapper._stopHeightObserver, errors: layoutErrors.slice() };
+  },
+  async patch(config) { vm.config = Object.assign({}, vm.config, config); await wait(); return this.measure(); },
+  async hide(value) { vm.hidden = value; await wait(); return this.measure(); },
+  async active(value) { vm.active = value; await wait(); return this.measure(); },
+  async stable() { const before = calls; await wait(650); return { delta: calls - before, measurement: this.measure() }; },
+  async pagerSize(size = 20) { wrapper.$refs.myPagination.style.padding = size + 'px 0'; await wait(); return this.measure(); },
+  async parentTheme(value) { vm.$el.classList.toggle('layout-padded-pager', value); await wait(); return this.measure(); },
+  async inactiveMutation() { const before = schedules; wrapper.$refs.myPagination.style.padding = '10px'; await wait(); return schedules - before; },
+  async destroy() { const root = vm.$el, pager = wrapper.$refs.myPagination; vm.$destroy(); root.remove(); const before = calls, beforeSchedules = schedules; if (pager) pager.style.padding = '15px'; window.dispatchEvent(new Event('resize')); await wait(); return { delta: calls - before, scheduleDelta: schedules - beforeSchedules, observing: !!wrapper._stopHeightObserver }; }
+};

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

@@ -168,12 +168,16 @@ function call(method, params = {}, sessionId) {
         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') {
+      if(kind==='cascaderLazy' && version==='legacy') {
         assert.deepStrictEqual(suite.display.errors,[]);
         console.log(version+' '+kind+' selection/display passed');
-        continue; // Lazy node rehydration on editor remount is a separate Element concern.
+        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');
@@ -201,6 +205,18 @@ function call(method, params = {}, sessionId) {
         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');

package/packages/ux-grid/test/delivery-umd.cjs

@@ -0,0 +1,48 @@
+// Run after npm run lib. Exercise the actual script-tag UMD product, without
+// CommonJS/AMD globals or a bundler hiding missing browser runtime dependencies.
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const root = path.resolve(__dirname, '../../..');
+const dependencyRoot = process.env.UX_GRID_TEST_DEPENDENCIES || root;
+const { JSDOM, VirtualConsole } = require(require.resolve('jsdom', { paths: [dependencyRoot] }));
+const errors = [];
+const virtualConsole = new VirtualConsole();
+virtualConsole.on('jsdomError', error => errors.push(error));
+const dom = new JSDOM('<html><body><script src="/lib/index.js"></script></body></html>', {
+  url: 'http://localhost/', runScripts: 'outside-only', pretendToBeVisual: true, virtualConsole
+});
+const { window } = dom;
+let vm;
+(async () => {
+  window.eval(fs.readFileSync(require.resolve('vue/dist/vue.js'), 'utf8'));
+  window.Vue.config.productionTip = false;
+  window.Vue.config.devtools = false;
+  window.Vue.config.errorHandler = error => errors.push(error);
+  window.eval(fs.readFileSync(path.join(root, 'lib/index.js'), 'utf8'));
+  const product = window.UMYUI;
+  assert(product && product.UxGrid && product.UxTableColumn && product.interceptor);
+  assert.strictEqual(product.version, require(path.join(root, 'package.json')).version);
+  assert(window.Vue.options.components.UxGrid, 'script tag automatically installs UxGrid');
+  vm = new window.Vue({
+    render(h) { return h(product.UxGrid, { props: {
+      data: [{ name: 'umd-row' }], columns: [{ field: 'name' }], height: 240,
+      paginationShow: true, total: 42, layout: 'total'
+    } }); }
+  }).$mount();
+  window.document.body.appendChild(vm.$el);
+  await new Promise(resolve => setTimeout(resolve, 150));
+  assert(vm.$el.textContent.includes('umd-row'), 'UMD product mounts real VXE row');
+  window.eval(fs.readFileSync(path.join(root, 'lib/umd/locale/en.js'), 'utf8'));
+  assert(product.lang && product.lang.en, 'UMD locale script registers language');
+  product.locale(product.lang.en);
+  const forceTree = node => { node.$forceUpdate(); node.$children.forEach(forceTree); };
+  forceTree(vm);
+  await new Promise(resolve => setTimeout(resolve, 80));
+  assert(vm.$el.textContent.includes('Total 42'), 'UMD locale changes pagination labels');
+  assert.deepStrictEqual(errors, []);
+  console.log('delivery UMD: browser-global product, auto-install, real rows and locale script passed');
+})().catch(error => { console.error(error); process.exitCode = 1; }).finally(() => {
+  if (vm) vm.$destroy();
+  dom.window.close();
+});

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

@@ -37,7 +37,7 @@ let validations = 0;
     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: '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();
@@ -120,6 +120,7 @@ let validations = 0;
   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, []);
@@ -132,12 +133,27 @@ let validations = 0;
   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' }];
+  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 = [];
@@ -160,6 +176,21 @@ let validations = 0;
   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(); });