@opentiny/vue-renderless 3.24.0 → 3.26.0

package/anchor/index.js

@@ -88,7 +88,7 @@ const handleScroll = (state) => () => {
   state.scrollTimer = window.setTimeout(() => {
     state.isScroll = false;
     clearTimeout(state.scrollTimer);
-  }, 200);
+  }, 300);
 };
 const setChildOffsetTop = ({ state, props }) => {
   var _a, _b;

package/cascader-node/vue.js

@@ -20,6 +20,7 @@ const renderless = (props, { computed, reactive, inject, watch }, { dispatch })
     inActivePath: computed(() => api2.isInPath(parent.state.activePath)),
     inCheckedPath: computed(() => api2.comptCheckPath()),
     value: computed(() => props.node.getValueByOption()),
+    // 仅 mf 用到nodeLabel
     nodeLabel: computed(() => {
       return parent.state.renderLabelFn ? parent.state.renderLabelFn({ node: props.node, data: props.node.data }) : props.node.label;
     })

package/color-select-panel/hue-select/index.js

@@ -2,8 +2,8 @@ import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
 const initState = (props, { reactive, ref, computed }) => {
   const hueValue = computed(() => props.color.get("hue"));
-  const thumbTop = ref(0);
-  const state = reactive({ hueValue, thumbTop });
+  const thumbLeft = ref(0);
+  const state = reactive({ hueValue, thumbLeft });
   return state;
 };
 const initDom = ({ ref }) => {
@@ -25,10 +25,10 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
     if (!bar.value) {
       return 0;
     }
-    return hue * (bar.value.offsetHeight - thumb.value.offsetHeight / 2) / 360;
+    return hue * (bar.value.offsetWidth - thumb.value.offsetWidth / 2) / 360;
   };
   const update = () => {
-    state.thumbTop = getThumbTop();
+    state.thumbLeft = getThumbTop();
   };
   const onDrag = (event) => {
     if (!bar.value || !thumb.value) {
@@ -39,12 +39,12 @@ const useEvent = ({ thumb, bar }, state, props, { emit }) => {
       return;
     }
     const rect = el == null ? void 0 : el.getBoundingClientRect();
-    const { clientY } = getClientXY(event);
-    let top = clientY - rect.top;
-    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-    top = Math.max(thumb.value.offsetHeight / 2, top);
-    const hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
-    state.thumbTop = top;
+    const { clientX } = getClientXY(event);
+    let left = clientX - rect.left;
+    left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+    left = Math.max(thumb.value.offsetWidth / 2, left);
+    const hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
+    state.thumbLeft = left;
     emit("hueUpdate", hue);
     props.color.set("hue", hue);
   };

package/color-select-panel/index.js

@@ -114,6 +114,32 @@ const initApi = (props, state, { emit, nextTick }) => {
     onClickOutside
   };
 };
+const parseCustomRGBA = (str, type) => {
+  if (!str || typeof str !== "string") {
+    return [0, 0, 0, 0];
+  }
+  let content = "";
+  let match = null;
+  if (type === "hsl") {
+    match = str.match(/hsla?\(([^)]+)\)/);
+  } else if (type === "rgb") {
+    match = str.match(/rgba?\(([^)]+)\)/);
+  } else if (type === "hsv") {
+    match = str.match(/hsva?\(([^)]+)\)/);
+  }
+  if (!match || !match[1]) {
+    return [0, 0, 0, 0];
+  }
+  content = match[1];
+  const parts = content.split(",").map((item) => item.trim());
+  const result = parts.map((item, index) => {
+    if (index === 0 || index === parts.length - 1 && parts.length === 4) {
+      return parseFloat(item);
+    }
+    return item;
+  });
+  return result;
+};
 const initState = (props, { reactive, ref, computed }) => {
   var _a, _b;
   const stack = ref([...(_a = props.history) != null ? _a : []]);
@@ -130,6 +156,12 @@ const initState = (props, { reactive, ref, computed }) => {
     })
   );
   const input = ref("");
+  const hexInput1 = ref();
+  const hexInput2 = ref();
+  const hexInput4 = ref();
+  const hexInput5 = ref();
+  const hexInput6 = ref();
+  const hexInput7 = ref();
   const showPicker = ref(props.visible);
   const showPanel = ref(false);
   const panelColor = computed(() => {
@@ -142,6 +174,12 @@ const initState = (props, { reactive, ref, computed }) => {
   const state = reactive({
     color,
     input,
+    hexInput1,
+    hexInput2,
+    hexInput4,
+    hexInput5,
+    hexInput6,
+    hexInput7,
     showPicker,
     showPanel,
     panelColor,
@@ -195,6 +233,11 @@ const initWatch = (state, props, { nextTick, watch }, { emit }) => {
     () => state.currentColor,
     () => {
       state.input = state.currentColor;
+      const result = parseCustomRGBA(state.currentColor, state.currentFormat);
+      state.hexInput4 = Math.ceil(Number(result[0]));
+      state.hexInput5 = result[1];
+      state.hexInput6 = result[2];
+      state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
       triggerColorUpdate(state.input, emit);
     },
     { flush: "sync" }
@@ -236,6 +279,7 @@ export {
   initState,
   initWatch,
   panelRgb,
+  parseCustomRGBA,
   triggerCancel,
   triggerColorUpdate,
   triggerConfirm,

package/color-select-panel/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { initApi, initState, initWatch } from "./index";
+import { initApi, initState, initWatch, parseCustomRGBA } from "./index";
 const api = [
   "state",
   "open",
@@ -53,6 +53,11 @@ const renderless = (props, hooks, utils) => {
   hooks.onMounted(() => {
     if (props.modelValue) {
       state.input = state.currentColor;
+      const result = parseCustomRGBA(state.currentColor, state.currentFormat) || [0, 0, 0, 0];
+      state.hexInput4 = Math.ceil(Number(result[0]));
+      state.hexInput5 = result[1];
+      state.hexInput6 = result[2];
+      state.hexInput7 = `${(Number(result[3]) || 1) * 100}%`;
     }
   });
   return api2;

package/date-range/index.js

@@ -139,7 +139,7 @@ const handleClear = ({ emit, state }) => () => {
   state.rightDate = nextMonth1(state.leftDate);
   state.rangeState.selecting = false;
   state.rangeState.endDate = null;
-  emit("pick", null);
+  emit("pick", []);
 };
 const handleChangeRange = (state, props) => (val) => {
   if (props.readonly) {

package/dropdown/vue.js

@@ -22,9 +22,11 @@ import {
   toggleFocus
 } from "./index";
 const api = ["state", "handleMainButtonClick", "hide", "show", "initDomOperation", "handleClick", "clickOutside"];
-const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig }) => {
+const renderless = (props, { reactive, watch, provide, onMounted, computed, onBeforeUnmount }, { emit, parent, broadcast, vm, nextTick, mode, designConfig, useBreakpoint }) => {
   const api2 = {};
+  const { current } = useBreakpoint();
   const state = reactive({
+    current,
     visible: false,
     timeout: null,
     focusing: false,

package/file-upload/index.js

@@ -193,6 +193,8 @@ const beforeUpload = ({
         if (accept) {
           const isExist = isAcceptType(acceptArray, f, constants, type);
           isExist ? fileRow.push(f) : remove({ api, file: f, autoRemove });
+        } else {
+          fileRow.push(f);
         }
         return type;
       });

package/file-upload/vue.js

@@ -144,7 +144,7 @@ const initState = ({
     chunkUploadUrl: "",
     largeFileInfo: {},
     headers: {},
-    accept: "",
+    accept: props.accept || "",
     edmToken: {},
     isSuccess: false,
     singleMaxSize: 200,

package/fluent-editor/index.js

@@ -109,7 +109,7 @@ const keyDownHandler = ({ state }) => (e) => {
     if (e.keyCode === 27 && state.isFullscreen) {
       state.isFullscreen = !state.isFullscreen;
     }
-  } else {
+  } else if (e.type === "click") {
     state.isFullscreen = !state.isFullscreen;
   }
 };

package/grid/plugins/exportExcel.js

@@ -1,6 +1,5 @@
 import "../../chunk-G2ADBYYC.js";
-import { extend } from "@opentiny/utils";
-import { browserInfo } from "@opentiny/utils";
+import { extend, browserInfo } from "@opentiny/utils";
 const isIE = browserInfo.name === "ie";
 const rgbRegExp = /^rgba?\((\d+),\s(\d+),\s(\d+)([\s\S]*)\)$/;
 const hexRegExp = /^#([a-zA-Z0-9]{3}|[a-zA-Z0-9]{6})$/;

package/grid/utils/column.js

@@ -2,72 +2,104 @@ import "../../chunk-G2ADBYYC.js";
 import { isBoolean } from "../static";
 import { initFilter } from "./common";
 let columnUniqueId = 0;
-const setColumnFormat = (column, props) => column.format = props.formatConfig;
-function setBasicProperty(column, context) {
-  column.id = `col_${++columnUniqueId}`;
-  column.type = context.type;
-  column.prop = context.prop;
-  column.rules = context.rules;
-  column.required = context.required;
-  column.property = context.field || context.prop;
-  column.title = context.title;
-  column.label = context.label;
-  column.width = context.width;
-  column.minWidth = context.minWidth;
-  column.resizable = context.resizable;
-  column.fixed = context.fixed;
-  column.align = context.align;
-  column.headerAlign = context.headerAlign;
-  column.footerAlign = context.footerAlign;
-  column.showOverflow = context.showOverflow;
-  column.showHeaderOverflow = context.showHeaderOverflow;
-  column.showTip = context.showTip;
-  column.showHeaderTip = context.showHeaderTip;
-  column.className = context.class || context.className;
-  column.headerClassName = context.headerClassName;
-  column.footerClassName = context.footerClassName;
-  column.indexMethod = context.indexMethod;
-  column.formatText = context.formatText;
-  column.formatValue = context.formatValue;
-  setColumnFormat(column, context);
-  column.sortable = context.sortable;
-  column.sortBy = context.sortBy;
-  column.sortMethod = context.sortMethod;
-  column.remoteSort = context.remoteSort;
-  column.filterMultiple = isBoolean(context.filterMultiple) ? context.filterMultiple : true;
-  column.filterMethod = context.filterMethod;
-  column.filterRender = context.filterRender;
-  column.filter = context.filter && initFilter(context.filter);
-  column.treeNode = context.treeNode;
-  column.renderer = context.renderer;
-  column.editor = context.editor;
-  column.operationConfig = context.operationConfig;
-  column.equals = context.equals;
+class FixedDetails {
+  constructor(fixedType) {
+    this.isLeft = fixedType === "left";
+    this.isLeftLast = false;
+    this.isRight = fixedType === "right";
+    this.isRightFirst = false;
+    this.left = 0;
+    this.right = 0;
+  }
+  getStyle(rightExtra = 0) {
+    const { isLeft, left, isRight, right } = this;
+    return {
+      left: isLeft ? `${left}px` : void 0,
+      right: isRight ? `${right + rightExtra}px` : void 0
+    };
+  }
+  getClass() {
+    const { isLeftLast, isRightFirst } = this;
+    return {
+      "fixed-left-last__column": isLeftLast,
+      "fixed-right-first__column": isRightFirst
+    };
+  }
 }
-function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
-  setBasicProperty(this, context);
-  this.params = context.params;
-  this.visible = true;
-  this.level = 1;
-  this.rowSpan = 1;
-  this.colSpan = 1;
-  this.order = null;
-  this.renderWidth = 0;
-  this.renderHeight = 0;
-  this.resizeWidth = 0;
-  this.renderLeft = 0;
-  this.model = {};
-  this.renderHeader = renderHeader || context.renderHeader;
-  this.renderCell = renderCell || context.renderCell;
-  this.renderData = renderData;
-  this.showIcon = isBoolean(context.showIcon) ? context.showIcon : true;
-  this.loading = false;
-  this.slots = context.slots;
-  this.own = context;
-  this.asyncPrefix = config.constant.asyncPrefix;
+class ColumnConfig {
+  constructor(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
+    this.id = `col_${++columnUniqueId}`;
+    this.type = context.type;
+    this.prop = context.prop;
+    this.rules = context.rules;
+    this.required = context.required;
+    this.property = context.field || context.prop;
+    this.title = context.title;
+    this.label = context.label;
+    this.width = context.width;
+    this.minWidth = context.minWidth;
+    this.resizable = context.resizable;
+    this._fixed = context.fixed;
+    this._fixedDetails = context.fixed ? new FixedDetails(context.fixed) : void 0;
+    this.align = context.align;
+    this.headerAlign = context.headerAlign;
+    this.footerAlign = context.footerAlign;
+    this.showOverflow = context.showOverflow;
+    this.showHeaderOverflow = context.showHeaderOverflow;
+    this.showTip = context.showTip;
+    this.showHeaderTip = context.showHeaderTip;
+    this.className = context.class || context.className;
+    this.headerClassName = context.headerClassName;
+    this.footerClassName = context.footerClassName;
+    this.indexMethod = context.indexMethod;
+    this.formatText = context.formatText;
+    this.formatValue = context.formatValue;
+    this.format = context.formatConfig;
+    this.sortable = context.sortable;
+    this.sortBy = context.sortBy;
+    this.sortMethod = context.sortMethod;
+    this.remoteSort = context.remoteSort;
+    this.filterMultiple = isBoolean(context.filterMultiple) ? context.filterMultiple : true;
+    this.filterMethod = context.filterMethod;
+    this.filterRender = context.filterRender;
+    this.filter = context.filter && initFilter(context.filter);
+    this.treeNode = context.treeNode;
+    this.renderer = context.renderer;
+    this.editor = context.editor;
+    this.operationConfig = context.operationConfig;
+    this.equals = context.equals;
+    this.params = context.params;
+    this.visible = true;
+    this.level = 1;
+    this.rowSpan = 1;
+    this.colSpan = 1;
+    this.order = null;
+    this.renderWidth = 0;
+    this.renderHeight = 0;
+    this.resizeWidth = 0;
+    this.renderLeft = 0;
+    this.model = {};
+    this.renderHeader = renderHeader || context.renderHeader;
+    this.renderCell = renderCell || context.renderCell;
+    this.renderData = renderData;
+    this.showIcon = isBoolean(context.showIcon) ? context.showIcon : true;
+    this.loading = false;
+    this.slots = context.slots;
+    this.own = context;
+    this.asyncPrefix = config.constant.asyncPrefix;
+  }
+  set fixed(val) {
+    this._fixed = val;
+    this._fixedDetails = val ? new FixedDetails(val) : void 0;
+  }
+  get fixed() {
+    return this._fixed;
+  }
+  get fixedDetails() {
+    return this._fixedDetails;
+  }
 }
 const getColumnConfig = (context, options, config) => context instanceof ColumnConfig ? context : new ColumnConfig(context, options, config);
 export {
-  getColumnConfig,
-  setColumnFormat
+  getColumnConfig
 };

package/grid/utils/common.js

@@ -1,9 +1,8 @@
 import {
   __spreadValues
 } from "../../chunk-G2ADBYYC.js";
-import { isNull } from "@opentiny/utils";
-import { find } from "@opentiny/utils";
-import { get, isFunction, set } from "../static";
+import { isNull, find, isFunction } from "@opentiny/utils";
+import { get, set } from "../static";
 const gridSize = ["medium", "small", "mini"];
 const getSize = ({ size, $parent }) => size || ($parent && gridSize.includes($parent.size) ? $parent.size : null);
 const getFuncText = (content) => isFunction(content) ? content() : content;
@@ -12,17 +11,42 @@ const getRowid = ($table, row) => {
   const rowId = get(row, getRowkey($table));
   return rowId ? encodeURIComponent(rowId) : "";
 };
-const getColumnList = (columns) => {
+const getColumnList = (columns, options = {}, level = 0) => {
   const result = [];
-  columns.forEach((column) => {
-    if (column.children && column.children.length) {
-      result.push(...getColumnList(column.children));
-    } else {
-      result.push(column);
+  columns.forEach((column, index) => {
+    var _a;
+    const hasChildren = (_a = column.children) == null ? void 0 : _a.length;
+    if (!options.hasFixed && column.fixed) {
+      options.hasFixed = true;
+    }
+    if (!options.isCheckable && column.type === "selection") {
+      options.isCheckable = true;
     }
+    if (level === 0 && !options.isGroup && hasChildren) {
+      options.isGroup = true;
+    }
+    options.columnCaches.push({ colid: column.id, column, index });
+    result.push.apply(result, hasChildren ? getColumnList(column.children, options, level + 1) : [column]);
   });
   return result;
 };
+const repairFixed = (root) => {
+  const subtree = [];
+  let fixed;
+  const recursive = (col) => {
+    subtree.push(col);
+    if (!fixed && col.fixed) {
+      fixed = col.fixed;
+    }
+    if (Array.isArray(col.children) && col.children.length > 0) {
+      col.children.forEach((col2) => recursive(col2));
+    }
+  };
+  recursive(root);
+  if (fixed) {
+    subtree.forEach((c) => c.fixed = fixed);
+  }
+};
 const getClass = (property, params) => property ? isFunction(property) ? property(params) : property : "";
 const getFilters = (filters) => (filters || []).map(({ label, value, data, checked }) => ({
   label,
@@ -32,17 +56,25 @@ const getFilters = (filters) => (filters || []).map(({ label, value, data, check
   checked: !!checked
 }));
 const initFilter = (filter) => {
-  return __spreadValues({
-    condition: {
-      input: "",
-      relation: "equals",
-      empty: null,
-      type: null,
-      value: []
-    },
-    hasFilter: false,
-    custom: null
-  }, filter);
+  var _a, _b, _c;
+  const {
+    values,
+    value: valueKey = "value",
+    checked: checkedKey = "checked",
+    condition,
+    enumable,
+    multi,
+    inputFilter
+  } = filter;
+  const value = ((_a = values == null ? void 0 : values.filter) == null ? void 0 : _a.call(values, (i) => i[checkedKey]).map((i) => i[valueKey])) || [];
+  const hasChecked = (_c = (_b = values == null ? void 0 : values.some) == null ? void 0 : _b.call(values, (i) => i[checkedKey])) != null ? _c : false;
+  const filterOptions = {
+    condition: { input: "", relation: "equals", empty: null, type: null, value },
+    hasFilter: inputFilter && !!(condition == null ? void 0 : condition.input) || enumable && multi && hasChecked || false,
+    custom: null,
+    showClear: true
+  };
+  return __spreadValues(__spreadValues({}, filterOptions), filter);
 };
 const formatText = (value) => `${isNull(value) ? "" : value}`;
 const setCellValue = (row, column, value) => {
@@ -116,8 +148,33 @@ const getListeners = ($attrs, $listeners) => {
   });
   return listeners;
 };
+function dfsCopy(tree, callback, parent = void 0, isTree = false, childrenKey = "children") {
+  let copy;
+  if (Array.isArray(tree)) {
+    copy = [];
+    tree.forEach((node, index) => {
+      const copyItem = callback(node, index, parent);
+      if (copyItem) {
+        copy.push(copyItem);
+      }
+      if (isTree) {
+        const children = node[childrenKey];
+        if (children) {
+          const childrenCopy = dfsCopy(children, callback, node, isTree, childrenKey);
+          if (copyItem) {
+            copyItem[childrenKey] = childrenCopy;
+          }
+        }
+      }
+    });
+  }
+  return copy;
+}
+let rowUniqueId = 0;
+const getRowUniqueId = () => `row_${++rowUniqueId}`;
 export {
   assemColumn,
+  dfsCopy,
   emitEvent,
   formatText,
   getCellValue,
@@ -126,11 +183,13 @@ export {
   getFilters,
   getFuncText,
   getListeners,
+  getRowUniqueId,
   getRowid,
   getRowkey,
   getSize,
   gridSize,
   hasChildrenList,
   initFilter,
+  repairFixed,
   setCellValue
 };

package/grid/utils/dom.js

@@ -8,8 +8,12 @@ const CELL_CLS = ".tiny-grid-cell";
 const ROW_CLS = ".tiny-grid-body__row";
 const isPx = (val) => val && /^\d+(px)?$/.test(val);
 const isScale = (val) => val && /^\d+%$/.test(val);
-const updateCellTitle = (event) => {
-  const cellEl = event.currentTarget.querySelector(CELL_CLS);
+const updateCellTitle = (event, td) => {
+  var _a;
+  const cellEl = td ? td.querySelector(".tiny-grid-cell-text") || td.querySelector(CELL_CLS) : (_a = event.currentTarget) == null ? void 0 : _a.querySelector(CELL_CLS);
+  if (!cellEl) {
+    return;
+  }
   const content = cellEl.innerText;
   if (cellEl.getAttribute("title") !== content) {
     cellEl.setAttribute("title", content);
@@ -17,109 +21,75 @@ const updateCellTitle = (event) => {
 };
 const rowToVisible = ($table, row) => {
   $table.$nextTick(() => {
-    const tableBodyVnode = $table.$refs.tableBody;
-    if (tableBodyVnode) {
-      const gridbodyEl = tableBodyVnode.$el;
-      const trEl = gridbodyEl.querySelector(`[${ATTR_NAME}="${getRowid($table, row)}"]`);
-      if ($table.scrollYLoad) {
-        const isOutOfBody = () => {
-          const bodyRect = $table.$el.getBoundingClientRect();
-          const trRect = trEl.getBoundingClientRect();
-          return trRect.top + trRect.height / 2 > bodyRect.top + bodyRect.height;
-        };
-        if (!trEl || isOutOfBody()) {
-          gridbodyEl.scrollTop = ($table.afterFullData.indexOf(row) - 1) * $table.scrollYStore.rowHeight;
-        }
-      } else if (trEl) {
-        const bodyHeight = gridbodyEl.clientHeight;
-        const bodySrcollTop = gridbodyEl.scrollTop;
-        const trOffsetTop = trEl.offsetTop + (trEl.offsetParent ? trEl.offsetParent.offsetTop : 0);
-        const trHeight = trEl.clientHeight;
-        if (trOffsetTop < bodySrcollTop || trOffsetTop > bodySrcollTop + bodyHeight) {
-          gridbodyEl.scrollTop = trOffsetTop;
-        } else if (trOffsetTop + trHeight >= bodyHeight + bodySrcollTop) {
-          gridbodyEl.scrollTop = bodySrcollTop + trHeight;
-        }
+    const { $refs, scrollYLoad, rowHeight, headerHeight, footerHeight, _tileInfo, _graphInfo } = $table;
+    const { tableBody: bodyVm } = $refs;
+    const { $el } = bodyVm;
+    const { map } = _tileInfo;
+    const { graphed } = _graphInfo;
+    const trEl = $el.querySelector(`[${ATTR_NAME}="${getRowid($table, row)}"]`);
+    const visibleStart = headerHeight;
+    const visibleEnd = $el.clientHeight - footerHeight;
+    const scrollTop = $el.scrollTop;
+    let position, trHeight;
+    let flag = false;
+    if (scrollYLoad) {
+      position = headerHeight + rowHeight * graphed.indexOf(map.get(row)) - scrollTop;
+      trHeight = rowHeight;
+      flag = true;
+    } else if (trEl) {
+      position = trEl.offsetTop - scrollTop;
+      trHeight = trEl.clientHeight;
+      flag = true;
+    }
+    if (flag) {
+      if (position < visibleStart) {
+        $el.scrollTop = scrollTop - (visibleStart - position);
+        return;
+      }
+      position += trHeight;
+      if (position > visibleEnd) {
+        $el.scrollTop = scrollTop + (position - visibleEnd);
       }
     }
   });
 };
-function getFixedLeft($table, from, column, body, offset) {
-  let scrollLeft = $table.elemStore["main-body-wrapper"].scrollLeft + offset;
-  if (!column.fixed) {
-    from.fixed === "left" && (scrollLeft = 0);
-    from.fixed === "right" && (scrollLeft = body.scrollWidth);
+const colToVisible = ($table, column) => {
+  if (column.fixed) {
+    return;
   }
-  return scrollLeft;
-}
-function computeScrollLeft($table, td) {
-  const { tableBody } = $table.$refs;
-  const { visibleColumn } = $table;
-  const { scrollLeft: bodyLeft, clientWidth: bodyWidth } = tableBody.$el;
-  let leftWidth = 0;
-  let rightWidth = 0;
-  visibleColumn.forEach((column) => {
-    if (column.fixed === "left") {
-      leftWidth += column.renderWidth;
-    } else if (column.fixed === "right") {
-      rightWidth += column.renderWidth;
-    }
-  });
-  const tdLeft = td._accumulateRenderWidth || td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0);
-  const tdWidth = td._renderWidth || td.clientWidth;
-  let scrollLeft;
-  if (tdLeft < bodyLeft + leftWidth) {
-    scrollLeft = tdLeft - leftWidth;
-  } else if (tdLeft + tdWidth > bodyLeft + bodyWidth - rightWidth) {
-    scrollLeft = tdLeft + tdWidth - bodyWidth + rightWidth;
-  } else {
-    scrollLeft = bodyLeft;
-  }
-  return scrollLeft;
-}
-function setBodyLeft(body, td, $table, column, move) {
-  const { isLeftArrow, isRightArrow, from } = move || {};
-  const bodyScollLeft = computeScrollLeft($table, td);
-  $table.scrollTo(bodyScollLeft);
-  $table.lastScrollLeft = bodyScollLeft;
-  if (from) {
-    const direction = isLeftArrow ? "left" : isRightArrow ? "right" : null;
-    const fixedDom = $table.elemStore[`${direction}-body-list`];
-    const mainBody = $table.elemStore["main-body-wrapper"];
-    const { left, right } = td.getBoundingClientRect();
-    let offset = 0;
-    if (isLeftArrow && fixedDom) {
-      const div = fixedDom.querySelector("td.fixed__column");
-      const division = div ? div.getBoundingClientRect().left : fixedDom.getBoundingClientRect().right;
-      division > left && (offset = left - division);
-    }
-    if (isRightArrow && fixedDom) {
-      const div = fixedDom.querySelector("td:not(.fixed__column)") || fixedDom;
-      const division = div.getBoundingClientRect().left;
-      division < right && (offset = right - division);
-    }
-    mainBody.scrollLeft = getFixedLeft($table, from, column, body, offset);
-  }
-}
-const colToVisible = ($table, column, move) => {
   $table.$nextTick(() => {
-    const gridbodyEl = $table.$refs.tableBody.$el;
-    const tdElem = gridbodyEl.querySelector(`.${column.id}`);
-    if (tdElem) {
-      setBodyLeft(gridbodyEl, tdElem, $table, column, move);
-    } else if ($table.scrollXLoad) {
-      const visibleColumn = $table.visibleColumn;
-      let scrollLeft = 0;
-      for (let index = 0; index < visibleColumn.length; index++) {
-        if (visibleColumn[index] === column) {
+    const { $refs, scrollXLoad, visibleColumn, columnStore } = $table;
+    const { tableBody: bodyVm } = $refs;
+    const { $el } = bodyVm;
+    const { leftList, rightList } = columnStore;
+    const tdEl = $el.querySelector(`.${column.id}`);
+    const visibleStart = leftList.reduce((p, c) => p += c.renderWidth, 0);
+    const visibleEnd = $el.clientWidth - rightList.reduce((p, c) => p += c.renderWidth, 0);
+    const scrollLeft = $el.scrollLeft;
+    const colWidth = column.renderWidth;
+    let position;
+    let flag = false;
+    if (scrollXLoad) {
+      flag = true;
+      position = -scrollLeft;
+      for (const col of visibleColumn) {
+        if (col === column)
           break;
-        }
-        scrollLeft += visibleColumn[index].renderWidth;
+        position += col.renderWidth;
+      }
+    } else if (tdEl) {
+      flag = true;
+      position = tdEl.offsetLeft - scrollLeft;
+    }
+    if (flag) {
+      if (position < visibleStart) {
+        $el.scrollLeft = scrollLeft - (visibleStart - position);
+        return;
+      }
+      position += colWidth;
+      if (position > visibleEnd) {
+        $el.scrollLeft = scrollLeft + (position - visibleEnd);
       }
-      gridbodyEl.scrollLeft = computeScrollLeft($table, {
-        _accumulateRenderWidth: scrollLeft,
-        _renderWidth: column.renderWidth
-      });
     }
   });
 };
@@ -130,6 +100,9 @@ const hasDataTag = (el, value) => {
   if (el.host) {
     el = el.host;
   }
+  if (!(el == null ? void 0 : el.getAttribute)) {
+    return false;
+  }
   return (" " + el.getAttribute("data-tag") + " ").includes(" " + value + " ");
 };
 const getEventTargetNode = (event, container, queryCls) => {

package/grid-select/index.js

@@ -17,9 +17,9 @@ const filter = ({ props, state, vm }) => (value) => {
   const { multiple, valueField, filterMethod, remote, remoteMethod } = props;
   if ((props.filterable || props.searchable) && typeof filterMethod === "function") {
     const table = vm.$refs.gridRef.$refs.tinyTable;
-    const fullData = table.afterFullData;
+    const fullData = table.getTableData().fullData;
     vm.$refs.gridRef.scrollTo(null, 0);
-    table.afterFullData = filterMethod(value, fullData) || [];
+    table.loadTableData(filterMethod(value, fullData) || []);
     vm.$refs.gridRef.handleTableData(!value);
     state.previousQuery = value;
   } else if (remote && typeof remoteMethod === "function") {

package/input/index.js

@@ -71,7 +71,8 @@ const calcTextareaHeight = ({
   }
   const { paddingSize, borderSize, boxSizing, contextStyle } = api.calculateNodeStyling(targetElement);
   hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
+  const safePlaceholder = targetElement.placeholder ? targetElement.placeholder.trim().split("\n")[0] : "";
+  hiddenTextarea.value = targetElement.value || safePlaceholder || "";
   let height = hiddenTextarea.scrollHeight;
   const textareaStyle = {};
   if (mode === "mobile") {
@@ -89,7 +90,7 @@ const calcTextareaHeight = ({
     if (boxSizing === STYLE.BorderBox) {
       minHeight = minHeight + paddingSize + borderSize;
     }
-    if (props.size) {
+    if (props.size || minRows === 1) {
       minHeight = props.size === "mini" ? minHeight * 0.67 : props.size === "small" ? minHeight : minHeight * 1.17;
     }
     if (props.height) {
@@ -97,7 +98,7 @@ const calcTextareaHeight = ({
     }
     if (!state.isDisplayOnly) {
       height = Math.max(minHeight, height);
-      textareaStyle.minHeight = `${minHeight}px`;
+      textareaStyle.minHeight = `${Math.floor(minHeight)}px`;
     } else {
       textareaStyle.minHeight = `0px`;
     }

package/input/vue.js

@@ -277,8 +277,7 @@ const initWatch = ({
   );
   watch(
     () => props.size,
-    () => nextTick(api2.resizeTextarea),
-    { immediate: true }
+    () => nextTick(api2.resizeTextarea)
   );
   watch(
     () => state.nativeInputValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.24.0",
+  "version": "3.26.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.24.0",
-    "@opentiny/vue-hooks": "~3.24.0",
+    "@opentiny/utils": "~3.26.0",
+    "@opentiny/vue-hooks": "~3.26.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/pager/vue.js

@@ -79,6 +79,7 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     showPager: computed(() => api2.computedShowPager()),
     internalLayout: computed(() => api2.computedInternalLayout()),
     totalText: computed(() => api2.computedTotalText()),
+    internalPageSizes: computed(() => props.pageSizes || [10, 20, 30, 40, 50, 100]),
     internalPageCount: computed(() => api2.computedInternalPageCount()),
     showJumperSuffix: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.showJumperSuffix) != null ? _b : true,
     align: computed(() => {
@@ -134,8 +135,8 @@ const renderless = (props, { reactive, computed, watch }, { emit, vm, nextTick,
     watchShowSizes: watchShowSizes({ nextTick, vm }),
     watchInternalPageSize: watchInternalPageSize({ emit, props })
   });
-  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   state.internalPageSize = api2.getInternalPageSize();
+  state.internalCurrentPage = api2.getValidCurrentPage(props.currentPage);
   watch(() => state.internalCurrentPage, api2.watchInternalCurrentPage);
   watch(() => state.internalPageSize, api2.watchInternalPageSize);
   watch(() => props.currentPage, api2.watchCurrentPage);

package/popeditor/index.js

@@ -106,9 +106,6 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
   if (skipBeforeClose !== true && typeof props.beforeClose === "function" && props.beforeClose("confirm") === false) {
     return;
   }
-  if (props.autoReset) {
-    handleReset({ api, state, props })();
-  }
   if (props.popseletor === constants.TYPE_GRID) {
     props.multi ? api.getMultiSelectedData({ props, state }) : api.getRadioSelectedData();
     if (!isNull(state.commitValue)) {
@@ -130,6 +127,9 @@ const handleConfirm = ({ api, constants, emit, props, state }) => (skipBeforeClo
       emit("change", commitValue, state.treeSelectList);
     }
   }
+  if (props.autoReset) {
+    handleReset({ api, state, props })();
+  }
   state.open = false;
 };
 const handleReset = ({ api, state, props }) => () => {

package/search/index.js

@@ -27,6 +27,7 @@ const searchClick = ({ emit, props, state }) => (event) => {
   event.preventDefault();
   if (props.mini && state.collapse) {
     state.collapse = false;
+    emit("expand");
   } else {
     emit("search", state.searchValue, state.currentValue);
   }
@@ -37,10 +38,14 @@ const searchEnterKey = ({ api, props, vm, nextTick }) => (event) => {
     nextTick(() => vm.$refs.input.blur());
   }
 };
-const clickOutside = ({ parent, props, state }) => (event) => {
-  if (!parent.$el.contains(event.target)) {
+const clickOutside = ({ parent, props, state, emit }) => (event) => {
+  const path = (event == null ? void 0 : event.composedPath) && event.composedPath();
+  if (path ? !path.includes(parent.$el) : !parent.$el.contains(event.target)) {
     state.show = false;
-    props.mini && !state.currentValue && (state.collapse = true);
+    if (props.mini && !state.currentValue && !state.collapse) {
+      state.collapse = true;
+      emit("collapse");
+    }
   }
 };
 const setDefaultType = (searchTypes, typeValue) => {

package/search/vue.js

@@ -76,7 +76,7 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, toR
     handleChange: handleChange({ emit, state }),
     showSelector: showSelector({ vm, state }),
     searchClick: searchClick({ emit, props, state }),
-    clickOutside: clickOutside({ parent, props, state }),
+    clickOutside: clickOutside({ parent, props, state, emit }),
     emitInput: emitInput({ emit })
   }, formatSearchTypes2.api);
   Object.assign(api2, {

package/select/index.js

@@ -57,9 +57,9 @@ const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
   const { multiple, valueField, filterMethod, remote, remoteMethod } = props;
   if ((props.filterable || props.searchable) && typeof filterMethod === "function") {
     const table = vm.$refs.selectGrid.$refs.tinyTable;
-    const fullData = table.afterFullData;
+    const fullData = table.getTableData().fullData;
     vm.$refs.selectGrid.scrollTo(null, 0);
-    table.afterFullData = filterMethod(value, fullData) || [];
+    table.loadTableData(filterMethod(value, fullData) || []);
     vm.$refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
     state.previousQuery = value;
   } else if (remote && typeof remoteMethod === "function") {

package/select/vue.js

@@ -269,7 +269,11 @@ const initState = ({ reactive, computed, props, api: api2, emitter, parent, cons
       return true;
     })(),
     designConfig,
-    currentSizeMap: computed(() => api2.computedCurrentSizeMap())
+    currentSizeMap: computed(() => api2.computedCurrentSizeMap()),
+    rootAutoTipConfig: computed(() => __spreadValues({
+      content: state.displayOnlyContent,
+      always: !!state.displayOnlyContent
+    }, props.tooltipConfig))
   }));
   return state;
 };

package/slider-button/vue.js

@@ -4,6 +4,7 @@ const api = ["state", "handleChange"];
 const renderless = (props, { computed, reactive, onMounted, inject, onBeforeUnmount, watch }, { emit, parent, dispatch, constants, nextTick, vm }) => {
   const state = reactive({
     disabled: inject("disabled", null) || props.disabled,
+    displayed: inject("displayed", null) || props.displayed,
     type: inject("sliderType", null),
     value: computed({
       get: () => api2.getValue(),

package/slider-button-group/vue.js

@@ -47,6 +47,7 @@ const renderless = (props, { reactive, provide, onMounted, onBeforeUnmount, watc
   provide("sliderType", props.type);
   provide("sliderSize", props.size);
   provide("disabled", props.disabled);
+  provide("displayed", props.displayed);
   onMounted(() => {
     api2.getChangePosition(props.modelValue);
     api2.watchVisible();

package/tabs/vue.js

@@ -40,7 +40,8 @@ const initState = ({ reactive, props }) => reactive({
   direction: "",
   expandPanesWidth: "",
   activeIndex: 1,
-  separator: props.separator
+  separator: props.separator,
+  headerOnly: props.headerOnly
 });
 const initWatcher = ({
   watch,

package/tabs-mf/index.js

@@ -203,7 +203,10 @@ const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
   Object.assign(state, { moreList, moreLeft, moreRight });
 });
 const getBoundRect = (vm) => () => vm.$el.getBoundingClientRect();
-const handleClickDropdownItem = (tabs) => (name) => tabs.clickMore(name);
+const handleClickDropdownItem = (tabs) => (navItem, event) => {
+  tabs.$emit("click", navItem, event);
+  tabs.clickMore(navItem.name);
+};
 const scrollToLeft = (tabs) => () => {
   tabs.scrollTo(tabs.state.navs[0].name);
 };

package/types/button-group.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { IButtonGroupNode as IButtonGroupNode$1 } from '@opentiny/vue-renderless/types/button-group.type';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 

package/types/button.type.d.ts

@@ -1,4 +1,5 @@
 import { ComputedRef, ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const buttonProps: {
@@ -68,6 +69,11 @@ declare const buttonProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 自定义样式 */
+    customStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
     /** 是否幽灵按钮 */
     ghost: BooleanConstructor;
     /** 点击事件 */
@@ -75,7 +81,7 @@ declare const buttonProps: {
         type: PropType<(ev: MouseEvent) => void>;
     };
     tiny_mode: StringConstructor;
-    tiny_mode_root: BooleanConstructor; /** 是否圆角按钮 */
+    tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
     tiny_renderless: FunctionConstructor;
     tiny_theme: StringConstructor;

package/types/dialog-box.type.d.ts

@@ -1,17 +1,7 @@
 import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams, ISharedRenderlessParamHooks } from './shared.type.js';
 
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
 declare const $constants: {
     DIALOG_SLIDER_RIGHT: string;
     DIALOG_FADE: string;
@@ -138,6 +128,9 @@ declare const dialogBoxProps: {
         type: ObjectConstructor;
         default: () => {};
     };
+    onClose: {
+        type: PropType<() => void>;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];

package/types/pager.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const pagerProps: {
@@ -33,7 +34,6 @@ declare const pagerProps: {
     };
     pageSizes: {
         type: PropType<number[]>;
-        default: () => number[];
     };
     pagerCount: {
         type: NumberConstructor;

package/types/radio-button.type.d.ts

@@ -1,6 +1,7 @@
 import { StyleValue, ExtractPropTypes } from 'vue';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 import { IRadioGroupProps } from './radio-group.type.js';
+import '@opentiny/vue-common';
 
 declare const $constants: {
     RADIO_GROUP: string;

package/types/radio-group.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const radioGroupProps: {

package/types/radio.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessParamUtils, ISharedRenderlessFunctionParams } from './shared.type.js';
 
 declare const $constants: {

package/types/slider.type.d.ts

@@ -1,4 +1,5 @@
-import { PropType, ExtractPropTypes, CSSProperties, ComputedRef } from 'vue';
+import { ExtractPropTypes, CSSProperties, ComputedRef } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const $constants: {

package/types/tabs.type.d.ts

@@ -57,6 +57,7 @@ declare const tabsProps: {
     moreShowAll: BooleanConstructor;
     panelMaxHeight: StringConstructor;
     panelWidth: StringConstructor;
+    headerOnly: BooleanConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -108,6 +109,7 @@ interface ITabsState {
     activeIndex: number;
     morePanes?: ITabsPaneVm[];
     separator?: boolean;
+    headerOnly?: boolean;
 }
 /**
  *tab根元素实例对象

package/types/user-contact.type.d.ts

@@ -1,17 +1,7 @@
 import { ExtractPropTypes, ref } from 'vue';
+import { PropType } from '@opentiny/vue-common';
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
 declare const userContactProps: {
     showName: {
         type: BooleanConstructor;

package/user/index.js

@@ -91,7 +91,7 @@ const request = {
       cb({ error: e });
     });
   },
-  batchRequest(api) {
+  batchRequest(api, emit) {
     const me = this;
     const reqParamsSeq = me.getParams();
     let reqLen = reqParamsSeq.length;
@@ -112,6 +112,7 @@ const request = {
             });
           });
           errors.length && logger.warn(`user [${errors.join(",")}] not found`);
+          emit("error", errors);
           this.clearRequest();
         }
       }
@@ -142,12 +143,12 @@ const request = {
       this.batch = batch;
     }
   },
-  getusers({ param, api, batch, cb }) {
+  getusers({ param, api, batch, cb, emit }) {
     if (batch !== false) {
       this.setBatch(batch);
       clearTimeout(this.timmer);
       this.addRequest({ param, cb });
-      this.timmer = setTimeout(() => this.batchRequest(api), 100);
+      this.timmer = setTimeout(() => this.batchRequest(api, emit), 100);
     } else {
       this.singleRequest(param, api, cb);
     }
@@ -316,7 +317,7 @@ const syncCacheIds = ({ props, state }) => (ids, queryIds, cacheData) => {
     }
   });
 };
-const getUsers = ({ api, props, state }) => (value) => {
+const getUsers = ({ api, props, state, emit }) => (value) => {
   const { cache } = props;
   const { valueField } = state;
   const ids = Array.isArray(value) ? value : value.split(props.valueSplit);
@@ -339,7 +340,7 @@ const getUsers = ({ api, props, state }) => (value) => {
         resolve(data.concat(filterData));
       }
     };
-    request.getusers({ param, api, batch: state.batch, cb });
+    request.getusers({ param, api, batch: state.batch, cb, emit });
   });
 };
 const updateCache = ({ props, state }) => () => {

package/user/vue.js

@@ -57,7 +57,7 @@ const renderless = (props, { reactive, watch, computed, provide }, { emit, nextT
     suggestUser: suggestUser(api2),
     cacheUser: cacheUser({ api: api2, props, service: $service, state }),
     initUser: initUser({ api: api2, props, state }),
-    getUsers: getUsers({ api: api2, props, state }),
+    getUsers: getUsers({ api: api2, props, state, emit }),
     setSelected: setSelected({ api: api2, props, state }),
     searchMethod: searchMethod({ api: api2, props, state, emit }),
     userChange: userChange({ api: api2, emit, props, state, dispatch, constants }),