yc-pro-components 0.0.83 → 0.0.85

package/es/components/form-item/src/overflow-tooltip.d.ts

@@ -0,0 +1,16 @@
+export interface PlaceholderHit {
+    el: HTMLElement;
+    text: string;
+}
+export type TextMeasurer = (text: string, font: string) => number;
+/** 用 canvas 测量文本宽度，避免读取 input 的 scrollWidth（占位符不参与布局） */
+export declare const measureTextWidth: TextMeasurer;
+export declare const isInputPlaceholderOverflow: (input: HTMLInputElement | HTMLTextAreaElement, measure?: TextMeasurer) => boolean;
+/**
+ * 找到当前指针下被截断的占位符。
+ * 输入框用文本测量；下拉框的占位符是独立节点，用 scrollWidth 判断。
+ */
+export declare const findPlaceholderOverflow: (root: HTMLElement, target: EventTarget | null, point?: {
+    x: number;
+    y: number;
+}, measure?: TextMeasurer) => PlaceholderHit | null;

package/es/components/form-item/src/overflow-tooltip.mjs

@@ -0,0 +1,67 @@
+const FIELD_SELECTOR = [
+  ".el-input",
+  ".el-textarea",
+  ".el-select",
+  ".el-date-editor",
+  ".el-cascader",
+  ".el-autocomplete",
+  ".el-input-number",
+  ".el-tree-select",
+  ".plus-form-item-field"
+].join(",");
+let measureCanvas = null;
+const measureTextWidth = (text, font) => {
+  if (typeof document === "undefined") return 0;
+  measureCanvas = measureCanvas || document.createElement("canvas");
+  const context = measureCanvas.getContext("2d");
+  if (!context) return 0;
+  context.font = font;
+  return context.measureText(text).width;
+};
+const readFont = (style) => `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+const availableWidth = (input) => {
+  const style = getComputedStyle(input);
+  const padding = (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+  return input.clientWidth - padding;
+};
+const isInputPlaceholderOverflow = (input, measure = measureTextWidth) => {
+  var _a;
+  const text = ((_a = input.placeholder) == null ? void 0 : _a.trim()) || "";
+  if (!text || input.value || input.clientWidth <= 0) return false;
+  return measure(text, readFont(getComputedStyle(input))) > availableWidth(input) + 1;
+};
+const hitFromInput = (input, measure) => {
+  if (!isInputPlaceholderOverflow(input, measure)) return null;
+  return { el: input, text: input.placeholder.trim() };
+};
+const containsPoint = (el, point) => {
+  const rect = el.getBoundingClientRect();
+  return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+};
+const findPlaceholderOverflow = (root, target, point, measure = measureTextWidth) => {
+  var _a;
+  if (!(target instanceof HTMLElement) || !root.contains(target)) return null;
+  const directInput = target.closest("input, textarea");
+  if (directInput instanceof HTMLInputElement || directInput instanceof HTMLTextAreaElement) {
+    if (!root.contains(directInput)) return null;
+    return hitFromInput(directInput, measure);
+  }
+  const field = target.closest(FIELD_SELECTOR);
+  if (!(field instanceof HTMLElement) || !root.contains(field)) return null;
+  const selectPlaceholder = field.querySelector(".el-select__placeholder.is-transparent");
+  if (selectPlaceholder instanceof HTMLElement) {
+    const text = ((_a = selectPlaceholder.textContent) == null ? void 0 : _a.trim()) || "";
+    if (text && selectPlaceholder.scrollWidth > selectPlaceholder.clientWidth + 1) {
+      return { el: selectPlaceholder, text };
+    }
+    return null;
+  }
+  if (!point) return null;
+  const inputs = Array.from(field.querySelectorAll("input, textarea"));
+  const hovered = inputs.find(
+    (input) => (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) && input.clientWidth > 0 && containsPoint(input, point)
+  );
+  return hovered ? hitFromInput(hovered, measure) : null;
+};
+
+export { findPlaceholderOverflow, isInputPlaceholderOverflow, measureTextWidth };