umy-ui-table 1.2.3 → 1.2.5

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

@@ -0,0 +1,784 @@
+import XEUtils from "xe-utils";
+import "./setup";
+import { renderer, interceptor } from "vxe-table/lib/ui";
+
+const inputRendererNames = [
+  "ElAutocomplete",
+  "ElInput",
+  "ElInputNumber",
+  "ElRate",
+  "ElSwitch",
+  "ElSlider",
+];
+
+const popupClassNames = [
+  "el-autocomplete-suggestion",
+  "el-select-dropdown",
+  "el-cascader__dropdown",
+  "el-cascader-menus",
+  "el-time-panel",
+  "el-picker-panel",
+  "el-color-dropdown",
+];
+
+function isEmptyValue(value) {
+  return value === null || value === undefined || value === "";
+}
+
+function getCellValue({ row, column }) {
+  return XEUtils.get(row, column.field || column.property);
+}
+
+function setCellValue({ row, column }, value) {
+  XEUtils.set(row, column.field || column.property, value);
+}
+
+function getComponentProps(renderOpts, params, value, extraProps) {
+  const size = params.$table && params.$table.vSize;
+  return XEUtils.assign(
+    size ? { size } : {},
+    renderOpts.name === "ElCascader" ? { options: renderOpts.options } : {},
+    extraProps,
+    renderOpts.props,
+    { value }
+  );
+}
+
+function getNativeOns(renderOpts, params) {
+  const nativeOns = {};
+  XEUtils.objectEach(renderOpts.nativeEvents, (callback, name) => {
+    nativeOns[name] = (...args) => callback(params, ...args);
+  });
+  return nativeOns;
+}
+
+function getEventOns(renderOpts, params, modelCallback, changeCallback) {
+  const events = renderOpts.events || {};
+  // Element emits input as well as change/select. Write the model on input,
+  // but validate/activate filters only on that component's legacy status event.
+  const statusEvent = renderOpts.name === "ElAutocomplete" ? "select"
+    : ["ElInput", "ElInputNumber"].indexOf(renderOpts.name) > -1 ? "input" : "change";
+  const ons = {};
+  XEUtils.objectEach(events, (callback, name) => {
+    ons[name] = (...args) => callback(params, ...args);
+  });
+
+  if (modelCallback) {
+    ons.input = (value) => {
+      modelCallback(value);
+      if (events.input) events.input(params, value);
+      if (statusEvent === "input" && changeCallback) changeCallback(value);
+    };
+  }
+  if (changeCallback && statusEvent !== "input") {
+    ons[statusEvent] = (...args) => {
+      changeCallback(...args);
+      if (events[statusEvent]) events[statusEvent](params, ...args);
+    };
+  }
+  return ons;
+}
+
+function getEditOns(renderOpts, params) {
+  const { $table } = params;
+  return getEventOns(
+    renderOpts,
+    params,
+    (value) => {
+      setCellValue(params, value);
+    },
+    () => {
+      // Body-mounted Element popups deactivate VXE's table on mousedown even
+      // when its edit-close interceptor vetoes closing. Restore activation so
+      // the ensuing component change still runs the kernel's change rules.
+      const getEditRecord = $table.getEditCell || $table.getEditRecord;
+      const active = getEditRecord && getEditRecord.call($table);
+      if (active && active.row === params.row && $table.focus) $table.focus();
+      $table.updateStatus(params);
+    }
+  );
+}
+
+function getFilterOns(renderOpts, params, option) {
+  const updateOption = () => {
+    const checked = Array.isArray(option.data)
+      ? option.data.length > 0
+      : !isEmptyValue(option.data);
+    if (params.$panel && params.$panel.changeOption) {
+      params.$panel.changeOption({}, checked, option);
+    } else if (params.$table && params.$table.updateFilterOptionStatus) {
+      params.$table.updateFilterOptionStatus(option, checked);
+    }
+  };
+  return getEventOns(
+    renderOpts,
+    params,
+    (value) => {
+      option.data = value;
+    },
+    updateOption
+  );
+}
+
+function renderComponent(h, renderOpts, params, value, ons, extraProps, children) {
+  return [
+    h(renderOpts.name, {
+      attrs: renderOpts.attrs,
+      props: getComponentProps(renderOpts, params, value, extraProps),
+      on: ons,
+      nativeOn: getNativeOns(renderOpts, params),
+    }, children),
+  ];
+}
+
+function renderEdit(h, renderOpts, params) {
+  return renderComponent(
+    h,
+    renderOpts,
+    params,
+    getCellValue(params),
+    getEditOns(renderOpts, params)
+  );
+}
+
+function renderFilter(h, renderOpts, params) {
+  return params.column.filters.map((option) =>
+    renderComponent(
+      h,
+      renderOpts,
+      params,
+      option.data,
+      getFilterOns(renderOpts, params, option)
+    )[0]
+  );
+}
+
+function isEqualValue(left, right) {
+  if (left === right) return true;
+  if (isEmptyValue(left) || isEmptyValue(right)) return false;
+  return String(left) === String(right);
+}
+
+function filterMethod({ option, row, column }) {
+  return isEqualValue(
+    XEUtils.get(row, column.field || column.property),
+    option.data
+  );
+}
+
+function selectFilterMethod({ option, row, column }) {
+  const renderOpts = column.filterRender || {};
+  const props = renderOpts.props || {};
+  const cellValue = XEUtils.get(row, column.field || column.property);
+  const optionValue = option.data;
+  if (!props.multiple) return isEqualValue(cellValue, optionValue);
+  if (Array.isArray(cellValue)) {
+    const values = Array.isArray(optionValue) ? optionValue : [optionValue];
+    return values.every((value) => cellValue.indexOf(value) > -1);
+  }
+  return Array.isArray(optionValue) && optionValue.indexOf(cellValue) > -1;
+}
+
+const selectLabelCache = new WeakMap();
+
+function getSelectLabel(renderOpts, value, params) {
+  const props = renderOpts.props || {};
+  const optionProps = renderOpts.optionProps || {};
+  const groupProps = renderOpts.optionGroupProps || {};
+  const labelProp = optionProps.label || "label";
+  const valueProp = optionProps.value || "value";
+  const optionsProp = groupProps.options || "options";
+  let options = renderOpts.options || [];
+
+  if (renderOpts.optionGroups) {
+    options = [];
+    renderOpts.optionGroups.forEach((group) => {
+      options = options.concat(group[optionsProp] || []);
+    });
+  }
+
+  const values = props.multiple && Array.isArray(value) ? value : [value];
+  let cache;
+  if ((props.filterable || props.remote) && params && params.row && params.column) {
+    let columns = selectLabelCache.get(params.row);
+    if (!columns) selectLabelCache.set(params.row, (columns = new WeakMap()));
+    cache = columns.get(params.column);
+    if (!cache) columns.set(params.column, (cache = new Map()));
+  }
+  return values
+    .map((itemValue) => {
+      const option = options.find(
+        (item) => item && item[valueProp] === itemValue
+      );
+      if (option) {
+        if (cache) cache.set(itemValue, option[labelProp]);
+        return option[labelProp];
+      }
+      return cache && cache.has(itemValue) ? cache.get(itemValue) : itemValue;
+    })
+    .filter((label) => !isEmptyValue(label))
+    .join(", ");
+}
+
+function selectCellRender(h, renderOpts, params) {
+  return [String(getSelectLabel(renderOpts, getCellValue(params), params) || "")];
+}
+
+// Element Select 通过子组件收集选项，不接收 options 配置属性。
+function renderSelectOptions(h, renderOpts) {
+  const props = renderOpts.optionProps || {};
+  const groupProps = renderOpts.optionGroupProps || {};
+  const renderOptions = (options) => (options || []).map((option, index) =>
+    h("el-option", {
+      key: index,
+      props: {
+        value: option[props.value || "value"],
+        label: option[props.label || "label"],
+        disabled: option[props.disabled || "disabled"],
+      },
+    })
+  );
+  return renderOpts.optionGroups
+    ? renderOpts.optionGroups.map((group, index) => h("el-option-group", {
+      key: index,
+      props: { label: group[groupProps.label || "label"], disabled: group[groupProps.disabled || "disabled"] },
+    }, renderOptions(group[groupProps.options || "options"])))
+    : renderOptions(renderOpts.options);
+}
+
+function selectEditRender(h, renderOpts, params) {
+  getSelectLabel(renderOpts, getCellValue(params), params);
+  const ons = getEditOns(renderOpts, params);
+  const onInput = ons.input;
+  ons.input = (value) => {
+    getSelectLabel(renderOpts, value, params);
+    onInput(value);
+  };
+  return renderComponent(
+    h,
+    renderOpts,
+    params,
+    getCellValue(params),
+    ons,
+    undefined,
+    renderSelectOptions(h, renderOpts)
+  );
+}
+
+function selectFilterRender(h, renderOpts, params) {
+  return params.column.filters.map((option) =>
+    renderComponent(
+      h,
+      renderOpts,
+      params,
+      option.data,
+      getFilterOns(renderOpts, params, option),
+      undefined,
+      renderSelectOptions(h, renderOpts)
+    )[0]
+  );
+}
+
+const cascaderLabelCache = new WeakMap();
+
+function getCascaderOptionIdentity(options, config, identity) {
+  if (!Array.isArray(options)) return;
+  identity.push(options, options.length);
+  options.forEach((option) => {
+    identity.push(option, option[config.value || "value"], option[config.leaf || "leaf"]);
+    getCascaderOptionIdentity(option[config.children || "children"], config, identity);
+  });
+}
+
+function getCascaderIdentity(renderOpts) {
+  const props = renderOpts.props || {};
+  const config = props.props || {};
+  const identity = [props.options || renderOpts.options, config.lazyLoad, config.lazy,
+    config.value, config.label, config.children, config.leaf, config.disabled,
+    config.emitPath, config.multiple, config.checkStrictly];
+  getCascaderOptionIdentity(props.options || renderOpts.options, config, identity);
+  return identity;
+}
+
+function sameCascaderIdentity(left, right) {
+  return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+
+function getCascaderCache(params, create, renderOpts) {
+  if (!params || !params.row || !params.column) return;
+  let columns = cascaderLabelCache.get(params.row);
+  if (!columns && create) cascaderLabelCache.set(params.row, (columns = new WeakMap()));
+  if (!columns) return;
+  let cache = columns.get(params.column);
+  const identity = getCascaderIdentity(renderOpts);
+  if (cache && !sameCascaderIdentity(identity, cache.identity)) {
+    columns.delete(params.column);
+    cache = undefined;
+  }
+  if (!cache && create) columns.set(params.column, (cache = new Map()));
+  if (cache && !cache.identity) {
+    cache.identity = identity;
+    cache.loaded = new Map();
+    cache.hydrated = new WeakSet();
+    cache.arrays = new WeakMap();
+    cache.items = new WeakMap();
+    cache.empty = [];
+  }
+  return cache;
+}
+
+function getCascaderOptions(options, config, cache, path = []) {
+  const valueKey = config.value || "value";
+  const childrenKey = config.children || "children";
+  const leafKey = config.leaf || "leaf";
+  const source = options || cache.loaded.get(JSON.stringify(path)) || cache.empty;
+  const result = source.map((item) => {
+    const itemPath = path.concat(item[valueKey]);
+    const loaded = cache.loaded.get(JSON.stringify(itemPath));
+    const explicit = Array.isArray(item[childrenKey]);
+    if (!explicit && !loaded) return item;
+    const children = getCascaderOptions(explicit ? item[childrenKey] : loaded, config, cache, itemPath);
+    if (explicit && children === item[childrenKey]) return item;
+    const previous = cache.items.get(item);
+    if (previous && previous.children === children &&
+      Object.keys(previous.original).length === Object.keys(item).length &&
+      Object.keys(item).every((key) => previous.original[key] === item[key])) return previous.option;
+    const option = Object.assign({}, item, { [childrenKey]: children });
+    if (!explicit) {
+      cache.hydrated.add(option);
+      if (!children.length && option[leafKey] === undefined) option[leafKey] = true;
+    }
+    cache.items.set(item, { original: Object.assign({}, item), children, option });
+    return option;
+  });
+  if (result.every((item, index) => item === source[index])) return source;
+  const previous = cache.arrays.get(source);
+  if (previous && previous.length === result.length && result.every((item, index) => item === previous[index])) return previous;
+  cache.arrays.set(source, result);
+  return result;
+}
+
+function cascaderEditRender(h, renderOpts, params) {
+  const ons = getEditOns(renderOpts, params);
+  const onInput = ons.input;
+  const props = renderOpts.props || {};
+  const config = props.props || {};
+  const cache = getCascaderCache(params, !!config.lazy, renderOpts);
+  let nodes;
+  const pendingMountRequests = [];
+  const getComponent = () => nodes && nodes[0].componentInstance;
+  const bindRequest = (request) => {
+    const component = getComponent();
+    if (component) request.component = component;
+    // Read the ref directly: evaluating Element's computed panel before mount
+    // can cache undefined because refs are not reactive. Retain only identity.
+    const panel = component && component.$refs && component.$refs.panel;
+    if (panel) request.store = panel.store;
+  };
+  let componentOpts = renderOpts;
+  if (config.lazy && cache) {
+    const options = props.options || renderOpts.options;
+    const hydrated = getCascaderOptions(options && options.length ? options : undefined, config, cache);
+    const lazyLoad = config.lazyLoad;
+    componentOpts = Object.assign({}, renderOpts, { props: Object.assign({}, props, {
+      options: hydrated,
+      props: Object.assign({}, config, { lazyLoad(node, resolve) {
+        const path = node.root ? [] : node.getPath();
+        // These complete children are already present through the options prop.
+        // Resolve loading without appending the same sibling list twice.
+        if (!node.root && cache.hydrated.has(node.data)) { resolve([]); return; }
+        if (typeof lazyLoad !== "function") { resolve([]); return; }
+        const request = {};
+        bindRequest(request);
+        if (!request.store) pendingMountRequests.push(request);
+        return lazyLoad.call(this, node, (children) => {
+          if (request.settled) return;
+          const columns = cascaderLabelCache.get(params.row);
+          const component = request.component || getComponent();
+          // An obsolete request must not invoke Element's resolve: that closure
+          // appends to the panel's *current* store, even after options changed.
+          // Read the cache directly so stale renderOpts cannot invalidate a newer
+          // cache while checking whether this request still belongs to it.
+          if (!columns || columns.get(params.column) !== cache ||
+            !sameCascaderIdentity(getCascaderIdentity(renderOpts), cache.identity) ||
+            (component && (component._isDestroyed || component._isBeingDestroyed))) return;
+          const panel = component && component.$refs && component.$refs.panel;
+          if (request.store && (!panel || panel.store !== request.store)) return;
+          request.settled = true;
+          if (Array.isArray(children)) cache.loaded.set(JSON.stringify(path), children.slice());
+          resolve(children);
+        });
+      } }),
+    }) });
+  }
+  ons.input = (value) => {
+    const component = nodes[0].componentInstance;
+    if (config.lazy && cache && component && component.getCheckedNodes) {
+      cache.clear();
+      component.getCheckedNodes().forEach((node) => {
+        if (!node) return;
+        cache.set(JSON.stringify(node.getValueByOption()), {
+          labels: node.pathLabels.slice(), values: node.getPath().slice(),
+        });
+      });
+    }
+    onInput(value);
+  };
+  nodes = renderComponent(h, componentOpts, params, getCellValue(params), ons);
+  if (config.lazy && cache) {
+    // Initial root loading starts before the panel ref exists. Vue's insert
+    // hook runs in that same mount turn, before asynchronous results can arrive.
+    const hooks = nodes[0].data.hook || {};
+    const onInsert = hooks.insert;
+    nodes[0].data.hook = Object.assign({}, hooks, {
+      insert(...args) {
+        if (onInsert) onInsert.apply(this, args);
+        pendingMountRequests.forEach((request) => {
+          if (!request.settled) bindRequest(request);
+        });
+        pendingMountRequests.length = 0;
+      },
+    });
+  }
+  return nodes;
+}
+
+function getCascaderLabel(renderOpts, value, params) {
+  const props = renderOpts.props || {};
+  const cascaderProps = props.props || {};
+  const options = props.options || renderOpts.options || [];
+  const valueProp = cascaderProps.value || "value";
+  const labelProp = cascaderProps.label || "label";
+  const childrenProp = cascaderProps.children || "children";
+  const cache = getCascaderCache(params, false, renderOpts);
+
+  const findPath = (items, target, path = []) => {
+    for (const item of items) {
+      const next = path.concat(item[labelProp]);
+      if (item[valueProp] === target) return next;
+      const found = findPath(item[childrenProp] || [], target, next);
+      if (found) return found;
+    }
+  };
+  const labelFor = (selected) => {
+    let labels = [];
+    let complete = true;
+    if (cascaderProps.emitPath === false) {
+      labels = findPath(options, selected) || [];
+      complete = labels.length > 0;
+    } else {
+      let level = options;
+      (Array.isArray(selected) ? selected : []).forEach((itemValue) => {
+        const option = level.find((item) => item[valueProp] === itemValue);
+        if (option) {
+          labels.push(option[labelProp]);
+          level = option[childrenProp] || [];
+        } else {
+          complete = false;
+        }
+      });
+    }
+    if (!complete && cache && cache.has(JSON.stringify(selected))) {
+      const cached = cache.get(JSON.stringify(selected));
+      let level = options;
+      labels = cached.values.map((itemValue, index) => {
+        const option = level.find((item) => item[valueProp] === itemValue);
+        level = option ? option[childrenProp] || [] : [];
+        return option ? option[labelProp] : cached.labels[index];
+      });
+    }
+    return (props.showAllLevels === false ? labels.slice(-1) : labels)
+      .join(` ${props.separator || "/"} `);
+  };
+  return cascaderProps.multiple && Array.isArray(value)
+    ? value.map(labelFor).filter(Boolean).join(", ") : labelFor(value);
+}
+
+function cascaderCellRender(h, renderOpts, params) {
+  return [getCascaderLabel(renderOpts, getCellValue(params), params)];
+}
+
+function formatDateValue(value, props, format) {
+  if (isEmptyValue(value)) return "";
+  const date = props.valueFormat === "timestamp" ? new Date(Number(value))
+    : XEUtils.toStringDate(value, typeof value === "string" ? props.valueFormat : undefined);
+  return XEUtils.isValidDate(date) ? XEUtils.toDateString(date, format) : "";
+}
+
+function dateCellRender(h, renderOpts, params) {
+  const props = renderOpts.props || {};
+  const value = getCellValue(params);
+  if (isEmptyValue(value)) return [""];
+  const rangeSeparator = props.rangeSeparator === undefined ? "-" : props.rangeSeparator;
+  const formats = {
+    week: "yyyywWW",
+    month: "yyyy-MM",
+    year: "yyyy",
+    dates: "yyyy-MM-dd",
+    daterange: "yyyy-MM-dd",
+    datetime: "yyyy-MM-dd HH:mm:ss",
+    datetimerange: "yyyy-MM-dd HH:mm:ss",
+    monthrange: "yyyy-MM",
+  };
+  const format = props.format || formats[props.type] || "yyyy-MM-dd";
+  const values = Array.isArray(value) ? value : [value];
+  return [
+    values
+      .map((item) => formatDateValue(item, props, format))
+      .join(props.type === "dates" ? ", " : ` ${rangeSeparator} `),
+  ];
+}
+
+function dateFilterMethod({ option, row, column }) {
+  const renderOpts = column.filterRender || {};
+  const props = renderOpts.props || {};
+  const cellValue = XEUtils.get(row, column.field || column.property);
+  const optionValue = option.data;
+  // Compare model values at the picker's precision, not Date.toString() or the
+  // display format (dd/MM/yyyy, for example, is not chronologically sortable).
+  const format = props.type === "month" || props.type === "monthrange" ? "yyyy-MM"
+    : props.type === "year" ? "yyyy"
+    : props.type === "datetime" || props.type === "datetimerange" ? "yyyy-MM-dd HH:mm:ss"
+    : "yyyy-MM-dd";
+  const valueLabel = formatDateValue(cellValue, props, format);
+  if (!valueLabel) return false;
+  if (!Array.isArray(optionValue)) {
+    const optionLabel = formatDateValue(optionValue, props, format);
+    return !!optionLabel && valueLabel === optionLabel;
+  }
+  if (props.type === "dates") {
+    return optionValue.some((value) => formatDateValue(value, props, format) === valueLabel);
+  }
+  if (optionValue.length !== 2 || optionValue.some(isEmptyValue) || isEmptyValue(cellValue)) return false;
+  const start = formatDateValue(optionValue[0], props, format);
+  const end = formatDateValue(optionValue[1], props, format);
+  return !!start && !!end && valueLabel >= start && valueLabel <= end;
+}
+
+function formatTimeValue(value, props, format) {
+  if (isEmptyValue(value)) return "";
+  // XEUtils requires a calendar date when parsing time-only strings.
+  let valueFormat = props.valueFormat;
+  const timeOnly = typeof value === "string" && valueFormat &&
+    valueFormat !== "timestamp" && !/[yMd]/.test(valueFormat);
+  // XEUtils parses 24-hour tokens; normalize Element's explicit AM/PM input.
+  if (timeOnly && /h/.test(valueFormat) && /[aA]/.test(valueFormat)) {
+    const meridiem = value.match(/am|pm/i);
+    if (meridiem) {
+      value = value.replace(/am|pm/i, "").trim();
+      valueFormat = valueFormat.replace(/h/g, "H").replace(/[aA]/g, "").trim();
+      const date = XEUtils.toStringDate(`2000-01-01 ${value}`, `yyyy-MM-dd ${valueFormat}`);
+      if (!XEUtils.isValidDate(date)) return "";
+      date.setHours(date.getHours() % 12 + (/pm/i.test(meridiem[0]) ? 12 : 0));
+      return XEUtils.toDateString(date, format);
+    }
+  }
+  return formatDateValue(timeOnly ? `2000-01-01 ${value}` : value,
+    timeOnly ? Object.assign({}, props, { valueFormat: `yyyy-MM-dd ${valueFormat}` }) : props,
+    format);
+}
+
+function timeFilterMethod({ option, row, column }) {
+  const props = (column.filterRender || {}).props || {};
+  const value = formatTimeValue(XEUtils.get(row, column.field || column.property), props, "HH:mm:ss");
+  if (!value) return false;
+  if (props.isRange) {
+    if (!Array.isArray(option.data) || option.data.length !== 2) return false;
+    const start = formatTimeValue(option.data[0], props, "HH:mm:ss");
+    const end = formatTimeValue(option.data[1], props, "HH:mm:ss");
+    return !!start && !!end && value >= start && value <= end;
+  }
+  const optionValue = formatTimeValue(option.data, props, "HH:mm:ss");
+  return !!optionValue && value === optionValue;
+}
+
+function timeCellRender(h, renderOpts, params) {
+  const props = renderOpts.props || {};
+  const value = getCellValue(params);
+  if (isEmptyValue(value)) return [""];
+  if (renderOpts.name === "ElTimeSelect") return [String(value)];
+  const values = Array.isArray(value) ? value : [value];
+  const rangeSeparator = props.rangeSeparator === undefined ? "-" : props.rangeSeparator;
+  return [
+    values
+      .map((item) => formatTimeValue(item, props, props.format || "HH:mm:ss"))
+      .join(Array.isArray(value) ? ` ${rangeSeparator} ` : ""),
+  ];
+}
+
+function buttonRender(h, renderOpts, params) {
+  return [
+    h(
+      renderOpts.name || "ElButton",
+      {
+        attrs: renderOpts.attrs,
+        props: getComponentProps(renderOpts, params, null),
+        on: getEventOns(renderOpts, params),
+        nativeOn: getNativeOns(renderOpts, params),
+      },
+      renderOpts.content == null ? [] : [String(renderOpts.content)]
+    ),
+  ];
+}
+
+function buttonsRender(h, renderOpts, params) {
+  return (renderOpts.children || []).reduce(
+    (nodes, child) => nodes.concat(buttonRender(h, child, params)),
+    []
+  );
+}
+
+function addRenderer(name, config) {
+  // 新版表单回调与旧 renderItem 同时提供；不覆盖应用注册的同名 renderer。
+  config.renderFormItemContent = renderFormItem;
+  config.renderItem = renderFormItem;
+  // 尊重业务在加载 umy-ui 前已经注册的同名渲染器。
+  if (!renderer.get(name)) renderer.add(name, config);
+}
+
+function renderFormItem(h, renderOpts, params) {
+  const field = params.field || params.property;
+  const value = XEUtils.get(params.data, field);
+  const ons = getEventOns(renderOpts, params, (nextValue) => {
+    XEUtils.set(params.data, field, nextValue);
+  }, () => {
+    if (params.$form) params.$form.updateStatus(params);
+  });
+  const formParams = Object.assign({}, params, { $table: params.$form });
+  if (renderOpts.name === "ElButtons") {
+    return (renderOpts.children || []).reduce((nodes, child) => nodes.concat(
+      renderFormItem(h, Object.assign({ name: "ElButton" }, child), params)
+    ), []);
+  }
+  if (renderOpts.name === "ElButton") {
+    return buttonRender(h, Object.assign({}, renderOpts, {
+      content: renderOpts.content == null ? (renderOpts.props || {}).content : renderOpts.content,
+    }), formParams);
+  }
+  if (renderOpts.name === "ElRadio" || renderOpts.name === "ElCheckbox") {
+    const optionProps = renderOpts.optionProps || {};
+    return renderComponent(h, Object.assign({}, renderOpts, { name: `${renderOpts.name}Group` }),
+      formParams, value, ons, undefined, (renderOpts.options || []).map((option, index) =>
+        h(renderOpts.name, { key: index, props: {
+          label: option[optionProps.value || "value"],
+          disabled: option[optionProps.disabled || "disabled"],
+        } }, [String(option[optionProps.label || "label"] == null ? "" : option[optionProps.label || "label"])])));
+  }
+  return renderComponent(h, renderOpts, formParams, value, ons, undefined,
+    renderOpts.name === "ElSelect" ? renderSelectOptions(h, renderOpts) : undefined);
+}
+
+inputRendererNames.forEach((name) => {
+  addRenderer(name, {
+    tableAutoFocus: ".el-input__inner",
+    renderTableDefault: renderEdit,
+    renderTableEdit: renderEdit,
+    renderTableFilter: renderFilter,
+    tableFilterDefaultMethod: filterMethod,
+    tableExportMethod: ({ row, column }) =>
+      XEUtils.get(row, column.field || column.property),
+  });
+});
+
+addRenderer("ElSelect", {
+  tableAutoFocus: ".el-input__inner",
+  renderTableDefault: selectEditRender,
+  renderTableEdit: selectEditRender,
+  renderTableCell: selectCellRender,
+  renderTableFilter: selectFilterRender,
+  tableFilterDefaultMethod: selectFilterMethod,
+  tableExportMethod: (params) =>
+    getSelectLabel(
+      params.column.editRender || params.column.cellRender || {},
+      getCellValue(params),
+      params
+    ),
+});
+
+addRenderer("ElCascader", {
+  tableAutoFocus: ".el-input__inner",
+  renderTableEdit: cascaderEditRender,
+  renderTableCell: cascaderCellRender,
+  tableExportMethod: (params) =>
+    getCascaderLabel(
+      params.column.editRender || params.column.cellRender || {},
+      getCellValue(params),
+      params
+    ),
+});
+
+["ElDatePicker"].forEach((name) => {
+  addRenderer(name, {
+    tableAutoFocus: ".el-input__inner",
+    renderTableEdit: renderEdit,
+    renderTableCell: dateCellRender,
+    renderTableFilter: renderFilter,
+    tableFilterDefaultMethod: dateFilterMethod,
+    tableExportMethod: (params) => dateCellRender(null,
+      params.column.editRender || params.column.cellRender || {}, params)[0],
+  });
+});
+
+["ElTimePicker", "ElTimeSelect"].forEach((name) => {
+  addRenderer(name, {
+    tableAutoFocus: ".el-input__inner",
+    renderTableEdit: renderEdit,
+    renderTableCell: timeCellRender,
+    renderTableFilter: renderFilter,
+    tableFilterDefaultMethod: name === "ElTimePicker" ? timeFilterMethod : filterMethod,
+    tableExportMethod: (params) => timeCellRender(null,
+      params.column.editRender || params.column.cellRender || {}, params)[0],
+  });
+});
+
+["ElRadio", "ElCheckbox"].forEach((name) => {
+  addRenderer(name, {
+    tableAutoFocus: "input",
+    renderTableDefault: renderEdit,
+    renderTableEdit: renderEdit,
+  });
+});
+
+addRenderer("ElButton", { renderTableDefault: buttonRender });
+addRenderer("ElButtons", { renderTableDefault: buttonsRender });
+
+function isPopupEvent(params, event) {
+  const evnt = (params && params.$event) || event;
+  let target = evnt && evnt.target;
+  const doc = typeof document === "undefined" ? null : document;
+  while (target && target.nodeType && target !== doc) {
+    if (target.classList) {
+      for (let index = 0; index < popupClassNames.length; index += 1) {
+        if (target.classList.contains(popupClassNames[index])) return false;
+      }
+    }
+    target = target.parentNode;
+  }
+}
+
+const popupGuardKey = "__umyElementPopupGuard";
+isPopupEvent[popupGuardKey] = true;
+if (!interceptor.get("event.clearActived").some((callback) => callback[popupGuardKey])) {
+  interceptor.add("event.clearActived", isPopupEvent);
+}
+// VXE only falls back to the legacy list when the modern list is empty.
+// Keep that priority while making popup protection available to both APIs.
+function clearEditAdapter(params, event) {
+  if (interceptor.get("event.clearEdit").some((callback) => callback !== clearEditAdapter)) {
+    return isPopupEvent(params, event);
+  }
+  const callbacks = interceptor.get("event.clearActived");
+  for (let index = 0; index < callbacks.length; index += 1) {
+    const callback = callbacks[index];
+    if (callback === clearEditAdapter) continue;
+    const result = callback(Object.assign({}, params), event);
+    if (result === false || (result && result.status === false)) return result;
+  }
+}
+clearEditAdapter[popupGuardKey] = true;
+if (!interceptor.get("event.clearEdit").some((callback) => callback[popupGuardKey])) {
+  interceptor.add("event.clearEdit", clearEditAdapter);
+}
+if (!interceptor.get("event.clearFilter").some((callback) => callback[popupGuardKey])) {
+  interceptor.add("event.clearFilter", isPopupEvent);
+}