yc-pro-components 0.0.83 → 0.0.84

package/lib/components/form-item/src/index.vue2.js

@@ -12,6 +12,7 @@ require('sortablejs');
 var index$1 = require('../../render/index.js');
 var elementPlus = require('element-plus');
 var formItem = require('./form-item.js');
+var overflowTooltip = require('./overflow-tooltip.js');
 var is = require('../../utils/is.js');
 
 const _hoisted_1 = { class: "el-form-item__error" };
@@ -24,6 +25,7 @@ const _hoisted_4 = {
   key: 1,
   class: "plus-form-item-field"
 };
+const TOOLTIP_SHOW_DELAY = 300;
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PlusFormItem"
@@ -70,6 +72,85 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const customFieldPropsIsReady = vue.ref(false);
     const valueIsReady = vue.ref(false);
     const labelValue = vue.computed(() => index.getLabel(props.label));
+    const labelTextRef = vue.ref();
+    const labelOverflow = vue.ref(false);
+    const labelTooltipContent = vue.ref("");
+    const labelTooltipVisible = vue.ref(false);
+    const placeholderTooltipVisible = vue.ref(false);
+    const placeholderTooltipContent = vue.ref("");
+    const placeholderVirtualRef = vue.ref();
+    let labelTooltipTimer = null;
+    let placeholderTooltipTimer = null;
+    const syncLabelOverflow = () => {
+      const el = labelTextRef.value;
+      if (!el) {
+        labelOverflow.value = false;
+        labelTooltipContent.value = "";
+        return;
+      }
+      labelTooltipContent.value = (el.textContent || "").trim();
+      labelOverflow.value = el.scrollWidth > el.clientWidth + 1;
+    };
+    const showLabelTooltip = () => {
+      syncLabelOverflow();
+      if (labelTooltipTimer) clearTimeout(labelTooltipTimer);
+      if (!labelOverflow.value || !labelTooltipContent.value) {
+        labelTooltipVisible.value = false;
+        return;
+      }
+      if (labelTooltipVisible.value) return;
+      labelTooltipTimer = setTimeout(() => {
+        labelTooltipVisible.value = true;
+        labelTooltipTimer = null;
+      }, TOOLTIP_SHOW_DELAY);
+    };
+    const hideLabelTooltip = () => {
+      if (labelTooltipTimer) clearTimeout(labelTooltipTimer);
+      labelTooltipTimer = null;
+      labelTooltipVisible.value = false;
+    };
+    const hidePlaceholderTooltip = () => {
+      if (placeholderTooltipTimer) clearTimeout(placeholderTooltipTimer);
+      placeholderTooltipTimer = null;
+      placeholderTooltipVisible.value = false;
+      placeholderTooltipContent.value = "";
+    };
+    const handlePlaceholderHover = (event) => {
+      const root = event.currentTarget;
+      if (!(root instanceof HTMLElement)) return;
+      const hit = overflowTooltip.findPlaceholderOverflow(root, event.target, {
+        x: event.clientX,
+        y: event.clientY
+      });
+      if (!hit) {
+        hidePlaceholderTooltip();
+        return;
+      }
+      const sameTarget = placeholderTooltipContent.value === hit.text && placeholderVirtualRef.value === hit.el;
+      if (sameTarget && (placeholderTooltipVisible.value || placeholderTooltipTimer)) return;
+      if (placeholderTooltipTimer) clearTimeout(placeholderTooltipTimer);
+      placeholderTooltipVisible.value = false;
+      placeholderVirtualRef.value = hit.el;
+      placeholderTooltipContent.value = hit.text;
+      placeholderTooltipTimer = setTimeout(() => {
+        placeholderTooltipVisible.value = true;
+        placeholderTooltipTimer = null;
+      }, TOOLTIP_SHOW_DELAY);
+    };
+    vue.watch(labelTextRef, (el, _, onCleanup) => {
+      syncLabelOverflow();
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => syncLabelOverflow());
+      observer.observe(el);
+      onCleanup(() => observer.disconnect());
+    });
+    vue.watch(labelValue, () => {
+      vue.nextTick(syncLabelOverflow);
+    });
+    vue.onBeforeUnmount(() => {
+      if (labelTooltipTimer) clearTimeout(labelTooltipTimer);
+      if (placeholderTooltipTimer) clearTimeout(placeholderTooltipTimer);
+    });
     const formFieldRefs = vue.inject(form.TableFormFieldRefInjectionKey, {});
     const tableRowInfo = vue.inject(form.TableFormRowInfoInjectionKey, {});
     const params = vue.computed(() => ({
@@ -238,212 +319,143 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "label-width": _ctx.hasLabel ? (_a = customFormItemProps.value) == null ? void 0 : _a.labelWidth : "0px"
       }), vue.createSlots({
         default: vue.withCtx(() => [
-          _ctx.renderField && vue.unref(is.isFunction)(_ctx.renderField) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-            valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
-              key: 0,
-              render: _ctx.renderField,
-              params: params.value,
-              "callback-value": state.value,
-              "custom-field-props": customFieldProps.value,
-              "render-type": "form",
-              "handle-change": handleChange
-            }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
-          ])) : _ctx.$slots[vue.unref(index.getFieldSlotName)(_ctx.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-            vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(_ctx.prop), vue.mergeProps(params.value, { column: props }))
-          ])) : _ctx.valueType === "select" && customFieldProps.value.multiple === true ? (vue.openBlock(), vue.createBlock(vue.unref(ElSelect), vue.mergeProps({
-            key: 2,
-            ref_key: "fieldInstance",
-            ref: fieldInstance,
-            modelValue: state.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
-            placeholder: vue.unref(t)("plus.field.pleaseSelect") + labelValue.value,
-            class: "plus-form-item-field",
-            clearable: _ctx.clearable
-          }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(
-                vue.Fragment,
-                null,
-                vue.renderList(vue.unref(customOptions), (item) => {
-                  return vue.openBlock(), vue.createElementBlock(
-                    vue.Fragment,
-                    {
-                      key: item.value
-                    },
-                    [
-                      item.options ? (vue.openBlock(), vue.createBlock(vue.unref(ElOptionGroup), {
-                        key: 0,
-                        label: item.label,
-                        disabled: item.disabled
-                      }, {
-                        default: vue.withCtx(() => [
-                          (vue.openBlock(true), vue.createElementBlock(
-                            vue.Fragment,
-                            null,
-                            vue.renderList(item.options, (option) => {
-                              return vue.openBlock(), vue.createBlock(vue.unref(ElOption), vue.mergeProps(
-                                {
-                                  key: option.value,
-                                  label: option.label,
-                                  value: option.value
-                                },
-                                vue.unref(is.isFunction)(option.fieldItemProps) ? option.fieldItemProps(option) : option.fieldItemProps
-                              ), {
-                                default: vue.withCtx(() => [
-                                  vue.unref(is.isFunction)(option.fieldSlot) ? (vue.openBlock(), vue.createBlock(
-                                    vue.resolveDynamicComponent(option.fieldSlot),
-                                    vue.normalizeProps(vue.mergeProps({ key: 0 }, option)),
-                                    null,
-                                    16
-                                    /* FULL_PROPS */
-                                  )) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(
-                                    vue.resolveDynamicComponent(_ctx.fieldChildrenSlot),
-                                    vue.normalizeProps(vue.mergeProps({ key: 1 }, option)),
-                                    null,
-                                    16
-                                    /* FULL_PROPS */
-                                  )) : (vue.openBlock(), vue.createElementBlock(
-                                    vue.Fragment,
-                                    { key: 2 },
-                                    [
-                                      vue.createTextVNode(
-                                        vue.toDisplayString(option.label),
-                                        1
-                                        /* TEXT */
-                                      )
-                                    ],
-                                    64
-                                    /* STABLE_FRAGMENT */
-                                  ))
-                                ]),
-                                _: 2
-                                /* DYNAMIC */
-                              }, 1040, ["label", "value"]);
-                            }),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["label", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElOption), vue.mergeProps(
-                        {
-                          key: 1,
-                          label: item.label,
-                          value: item.value
-                        },
-                        vue.unref(is.isFunction)(item.fieldItemProps) ? item.fieldItemProps(item) : item.fieldItemProps
-                      ), {
-                        default: vue.withCtx(() => [
-                          vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(
-                            vue.resolveDynamicComponent(item.fieldSlot),
-                            vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
-                            null,
-                            16
-                            /* FULL_PROPS */
-                          )) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(
-                            vue.resolveDynamicComponent(_ctx.fieldChildrenSlot),
-                            vue.normalizeProps(vue.mergeProps({ key: 1 }, item)),
-                            null,
-                            16
-                            /* FULL_PROPS */
-                          )) : (vue.openBlock(), vue.createElementBlock(
-                            vue.Fragment,
-                            { key: 2 },
-                            [
-                              vue.createTextVNode(
-                                vue.toDisplayString(item.label),
-                                1
-                                /* TEXT */
-                              )
-                            ],
-                            64
-                            /* STABLE_FRAGMENT */
-                          ))
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1040, ["label", "value"]))
-                    ],
-                    64
-                    /* STABLE_FRAGMENT */
-                  );
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            _: 2
-            /* DYNAMIC */
-          }, [
-            vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
-              return {
-                name: key,
-                fn: vue.withCtx((data) => [
-                  (vue.openBlock(), vue.createBlock(
-                    vue.resolveDynamicComponent(fieldSlot),
-                    vue.normalizeProps(vue.guardReactiveProps(data)),
-                    null,
-                    16
-                    /* FULL_PROPS */
-                  ))
-                ])
-              };
-            })
-          ]), 1040, ["modelValue", "placeholder", "clearable"])) : vue.unref(formItem.hasFieldComponent)(_ctx.valueType) ? (vue.openBlock(), vue.createElementBlock(
-            vue.Fragment,
-            { key: 3 },
+          vue.createElementVNode(
+            "div",
+            {
+              class: "plus-form-item__control",
+              onMouseover: handlePlaceholderHover,
+              onMouseleave: hidePlaceholderTooltip
+            },
             [
-              vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
-              vue.createCommentVNode(" has-children  "),
-              vue.unref(formItem.getFieldComponent)(_ctx.valueType).children ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
-                key: 0,
+              _ctx.renderField && vue.unref(is.isFunction)(_ctx.renderField) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
+                  key: 0,
+                  render: _ctx.renderField,
+                  params: params.value,
+                  "callback-value": state.value,
+                  "custom-field-props": customFieldProps.value,
+                  "render-type": "form",
+                  "handle-change": handleChange
+                }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
+              ])) : _ctx.$slots[vue.unref(index.getFieldSlotName)(_ctx.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(_ctx.prop), vue.mergeProps(params.value, { column: props }))
+              ])) : _ctx.valueType === "select" && customFieldProps.value.multiple === true ? (vue.openBlock(), vue.createBlock(vue.unref(ElSelect), vue.mergeProps({
+                key: 2,
                 ref_key: "fieldInstance",
                 ref: fieldInstance,
                 modelValue: state.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.value = $event),
+                placeholder: vue.unref(t)("plus.field.pleaseSelect") + labelValue.value,
                 class: "plus-form-item-field",
                 clearable: _ctx.clearable
-              }, commonProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
+              }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
                     vue.renderList(vue.unref(customOptions), (item) => {
-                      return vue.openBlock(), vue.createBlock(
-                        vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).children),
-                        vue.mergeProps({
-                          key: item.value
-                        }, getChildrenProps(item)),
+                      return vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
                         {
-                          default: vue.withCtx(() => [
-                            vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.fieldSlot), vue.mergeProps({
-                              key: 0,
-                              "model-value": state.value,
-                              column: params.value
-                            }, item), null, 16, ["model-value", "column"])) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.fieldChildrenSlot), vue.mergeProps({
-                              key: 1,
-                              "model-value": state.value,
-                              column: params.value
-                            }, item), null, 16, ["model-value", "column"])) : (vue.openBlock(), vue.createElementBlock(
-                              vue.Fragment,
-                              { key: 2 },
-                              [
-                                vue.createTextVNode(
-                                  vue.toDisplayString(item.label),
-                                  1
-                                  /* TEXT */
-                                )
-                              ],
-                              64
-                              /* STABLE_FRAGMENT */
-                            ))
-                          ]),
-                          _: 2
-                          /* DYNAMIC */
+                          key: item.value
                         },
-                        1040
-                        /* FULL_PROPS, DYNAMIC_SLOTS */
+                        [
+                          item.options ? (vue.openBlock(), vue.createBlock(vue.unref(ElOptionGroup), {
+                            key: 0,
+                            label: item.label,
+                            disabled: item.disabled
+                          }, {
+                            default: vue.withCtx(() => [
+                              (vue.openBlock(true), vue.createElementBlock(
+                                vue.Fragment,
+                                null,
+                                vue.renderList(item.options, (option) => {
+                                  return vue.openBlock(), vue.createBlock(vue.unref(ElOption), vue.mergeProps(
+                                    {
+                                      key: option.value,
+                                      label: option.label,
+                                      value: option.value
+                                    },
+                                    vue.unref(is.isFunction)(option.fieldItemProps) ? option.fieldItemProps(option) : option.fieldItemProps
+                                  ), {
+                                    default: vue.withCtx(() => [
+                                      vue.unref(is.isFunction)(option.fieldSlot) ? (vue.openBlock(), vue.createBlock(
+                                        vue.resolveDynamicComponent(option.fieldSlot),
+                                        vue.normalizeProps(vue.mergeProps({ key: 0 }, option)),
+                                        null,
+                                        16
+                                        /* FULL_PROPS */
+                                      )) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(
+                                        vue.resolveDynamicComponent(_ctx.fieldChildrenSlot),
+                                        vue.normalizeProps(vue.mergeProps({ key: 1 }, option)),
+                                        null,
+                                        16
+                                        /* FULL_PROPS */
+                                      )) : (vue.openBlock(), vue.createElementBlock(
+                                        vue.Fragment,
+                                        { key: 2 },
+                                        [
+                                          vue.createTextVNode(
+                                            vue.toDisplayString(option.label),
+                                            1
+                                            /* TEXT */
+                                          )
+                                        ],
+                                        64
+                                        /* STABLE_FRAGMENT */
+                                      ))
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1040, ["label", "value"]);
+                                }),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["label", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElOption), vue.mergeProps(
+                            {
+                              key: 1,
+                              label: item.label,
+                              value: item.value
+                            },
+                            vue.unref(is.isFunction)(item.fieldItemProps) ? item.fieldItemProps(item) : item.fieldItemProps
+                          ), {
+                            default: vue.withCtx(() => [
+                              vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(
+                                vue.resolveDynamicComponent(item.fieldSlot),
+                                vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
+                                null,
+                                16
+                                /* FULL_PROPS */
+                              )) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(
+                                vue.resolveDynamicComponent(_ctx.fieldChildrenSlot),
+                                vue.normalizeProps(vue.mergeProps({ key: 1 }, item)),
+                                null,
+                                16
+                                /* FULL_PROPS */
+                              )) : (vue.openBlock(), vue.createElementBlock(
+                                vue.Fragment,
+                                { key: 2 },
+                                [
+                                  vue.createTextVNode(
+                                    vue.toDisplayString(item.label),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ],
+                                64
+                                /* STABLE_FRAGMENT */
+                              ))
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1040, ["label", "value"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
                       );
                     }),
                     128
@@ -457,27 +469,76 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   return {
                     name: key,
                     fn: vue.withCtx((data) => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
-                        value: state.value,
-                        column: params.value
-                      }, data), null, 16, ["value", "column"]))
+                      (vue.openBlock(), vue.createBlock(
+                        vue.resolveDynamicComponent(fieldSlot),
+                        vue.normalizeProps(vue.guardReactiveProps(data)),
+                        null,
+                        16
+                        /* FULL_PROPS */
+                      ))
                     ])
                   };
                 })
-              ]), 1040, ["modelValue", "clearable"])) : (vue.openBlock(), vue.createElementBlock(
+              ]), 1040, ["modelValue", "placeholder", "clearable"])) : vue.unref(formItem.hasFieldComponent)(_ctx.valueType) ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
-                { key: 1 },
+                { key: 3 },
                 [
-                  vue.createCommentVNode(" no-children  "),
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
+                  vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
+                  vue.createCommentVNode(" has-children  "),
+                  vue.unref(formItem.getFieldComponent)(_ctx.valueType).children ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
+                    key: 0,
                     ref_key: "fieldInstance",
                     ref: fieldInstance,
                     modelValue: state.value,
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.value = $event),
                     class: "plus-form-item-field",
-                    clearable: _ctx.clearable,
-                    "field-children-slot": _ctx.fieldChildrenSlot
+                    clearable: _ctx.clearable
                   }, commonProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(vue.unref(customOptions), (item) => {
+                          return vue.openBlock(), vue.createBlock(
+                            vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).children),
+                            vue.mergeProps({
+                              key: item.value
+                            }, getChildrenProps(item)),
+                            {
+                              default: vue.withCtx(() => [
+                                vue.unref(is.isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.fieldSlot), vue.mergeProps({
+                                  key: 0,
+                                  "model-value": state.value,
+                                  column: params.value
+                                }, item), null, 16, ["model-value", "column"])) : vue.unref(is.isFunction)(_ctx.fieldChildrenSlot) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.fieldChildrenSlot), vue.mergeProps({
+                                  key: 1,
+                                  "model-value": state.value,
+                                  column: params.value
+                                }, item), null, 16, ["model-value", "column"])) : (vue.openBlock(), vue.createElementBlock(
+                                  vue.Fragment,
+                                  { key: 2 },
+                                  [
+                                    vue.createTextVNode(
+                                      vue.toDisplayString(item.label),
+                                      1
+                                      /* TEXT */
+                                    )
+                                  ],
+                                  64
+                                  /* STABLE_FRAGMENT */
+                                ))
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            },
+                            1040
+                            /* FULL_PROPS, DYNAMIC_SLOTS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
                     _: 2
                     /* DYNAMIC */
                   }, [
@@ -486,88 +547,129 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         name: key,
                         fn: vue.withCtx((data) => [
                           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
-                            "model-value": state.value,
+                            value: state.value,
                             column: params.value
-                          }, data), null, 16, ["model-value", "column"]))
+                          }, data), null, 16, ["value", "column"]))
                         ])
                       };
                     })
-                  ]), 1040, ["modelValue", "clearable", "field-children-slot"]))
+                  ]), 1040, ["modelValue", "clearable"])) : (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    { key: 1 },
+                    [
+                      vue.createCommentVNode(" no-children  "),
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(formItem.getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
+                        ref_key: "fieldInstance",
+                        ref: fieldInstance,
+                        modelValue: state.value,
+                        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.value = $event),
+                        class: "plus-form-item-field",
+                        clearable: _ctx.clearable,
+                        "field-children-slot": _ctx.fieldChildrenSlot
+                      }, commonProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
+                          return {
+                            name: key,
+                            fn: vue.withCtx((data) => [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
+                                "model-value": state.value,
+                                column: params.value
+                              }, data), null, 16, ["model-value", "column"]))
+                            ])
+                          };
+                        })
+                      ]), 1040, ["modelValue", "clearable", "field-children-slot"]))
+                    ],
+                    2112
+                    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                  ))
                 ],
-                2112
-                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-              ))
+                64
+                /* STABLE_FRAGMENT */
+              )) : _ctx.valueType === "text" ? (vue.openBlock(), vue.createBlock(
+                vue.unref(elementPlus.ElText),
+                vue.mergeProps({
+                  key: 4,
+                  ref_key: "fieldInstance",
+                  ref: fieldInstance,
+                  class: "plus-form-item-field"
+                }, customFieldProps.value),
+                {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(state.value),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                16
+                /* FULL_PROPS */
+              )) : _ctx.valueType === "divider" ? (vue.openBlock(), vue.createBlock(
+                vue.unref(elementPlus.ElDivider),
+                vue.mergeProps({
+                  key: 5,
+                  ref_key: "fieldInstance",
+                  ref: fieldInstance,
+                  class: "plus-form-item-field"
+                }, customFieldProps.value),
+                {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(
+                      vue.toDisplayString(state.value),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  _: 1
+                  /* STABLE */
+                },
+                16
+                /* FULL_PROPS */
+              )) : (vue.openBlock(), vue.createBlock(vue.unref(ElInput), vue.mergeProps({
+                key: 6,
+                ref_key: "fieldInstance",
+                ref: fieldInstance,
+                modelValue: state.value,
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.value = $event),
+                class: "plus-form-item-field",
+                placeholder: vue.unref(t)("plus.field.pleaseEnter") + labelValue.value,
+                autocomplete: "off",
+                clearable: _ctx.clearable
+              }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
+                _: 2
+                /* DYNAMIC */
+              }, [
+                vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
+                  return {
+                    name: key,
+                    fn: vue.withCtx((data) => [
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
+                        "model-value": state.value,
+                        column: params.value
+                      }, data), null, 16, ["model-value", "column"]))
+                    ])
+                  };
+                })
+              ]), 1040, ["modelValue", "placeholder", "clearable"])),
+              vue.createVNode(vue.unref(ElTooltip), {
+                visible: placeholderTooltipVisible.value,
+                "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => placeholderTooltipVisible.value = $event),
+                content: placeholderTooltipContent.value,
+                placement: "top",
+                "virtual-triggering": "",
+                "virtual-ref": placeholderVirtualRef.value,
+                disabled: !placeholderTooltipContent.value
+              }, null, 8, ["visible", "content", "virtual-ref", "disabled"])
             ],
-            64
-            /* STABLE_FRAGMENT */
-          )) : _ctx.valueType === "text" ? (vue.openBlock(), vue.createBlock(
-            vue.unref(elementPlus.ElText),
-            vue.mergeProps({
-              key: 4,
-              ref_key: "fieldInstance",
-              ref: fieldInstance,
-              class: "plus-form-item-field"
-            }, customFieldProps.value),
-            {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(
-                  vue.toDisplayString(state.value),
-                  1
-                  /* TEXT */
-                )
-              ]),
-              _: 1
-              /* STABLE */
-            },
-            16
-            /* FULL_PROPS */
-          )) : _ctx.valueType === "divider" ? (vue.openBlock(), vue.createBlock(
-            vue.unref(elementPlus.ElDivider),
-            vue.mergeProps({
-              key: 5,
-              ref_key: "fieldInstance",
-              ref: fieldInstance,
-              class: "plus-form-item-field"
-            }, customFieldProps.value),
-            {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(
-                  vue.toDisplayString(state.value),
-                  1
-                  /* TEXT */
-                )
-              ]),
-              _: 1
-              /* STABLE */
-            },
-            16
-            /* FULL_PROPS */
-          )) : (vue.openBlock(), vue.createBlock(vue.unref(ElInput), vue.mergeProps({
-            key: 6,
-            ref_key: "fieldInstance",
-            ref: fieldInstance,
-            modelValue: state.value,
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.value = $event),
-            class: "plus-form-item-field",
-            placeholder: vue.unref(t)("plus.field.pleaseEnter") + labelValue.value,
-            autocomplete: "off",
-            clearable: _ctx.clearable
-          }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), vue.createSlots({
-            _: 2
-            /* DYNAMIC */
-          }, [
-            vue.renderList(_ctx.fieldSlots, (fieldSlot, key) => {
-              return {
-                name: key,
-                fn: vue.withCtx((data) => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(fieldSlot), vue.mergeProps({
-                    "model-value": state.value,
-                    column: params.value
-                  }, data), null, 16, ["model-value", "column"]))
-                ])
-              };
-            })
-          ]), 1040, ["modelValue", "placeholder", "clearable"]))
+            32
+            /* NEED_HYDRATION */
+          )
         ]),
         _: 2
         /* DYNAMIC */
@@ -589,31 +691,57 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           name: "label",
           fn: vue.withCtx(({ label: currentLabel }) => [
             vue.createElementVNode("span", _hoisted_2, [
-              _ctx.renderLabel && vue.unref(is.isFunction)(_ctx.renderLabel) ? (vue.openBlock(), vue.createElementBlock(
-                vue.Fragment,
-                { key: 0 },
-                [
-                  valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
-                    key: 0,
-                    render: _ctx.renderLabel,
-                    params: params.value,
-                    "callback-value": currentLabel,
-                    "custom-field-props": customFieldProps.value
-                  }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
-                ],
-                64
-                /* STABLE_FRAGMENT */
-              )) : vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(_ctx.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, params.value)), () => [
-                vue.createTextVNode(
-                  vue.toDisplayString(currentLabel),
-                  1
-                  /* TEXT */
-                )
-              ]),
+              vue.createVNode(vue.unref(ElTooltip), {
+                visible: labelTooltipVisible.value,
+                "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => labelTooltipVisible.value = $event),
+                content: labelTooltipContent.value,
+                placement: "top",
+                disabled: !labelOverflow.value || !labelTooltipContent.value
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode(
+                    "span",
+                    {
+                      ref_key: "labelTextRef",
+                      ref: labelTextRef,
+                      class: "plus-form-item__label-text",
+                      onMouseenter: showLabelTooltip,
+                      onMouseleave: hideLabelTooltip
+                    },
+                    [
+                      _ctx.renderLabel && vue.unref(is.isFunction)(_ctx.renderLabel) ? (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 0 },
+                        [
+                          valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusRender), {
+                            key: 0,
+                            render: _ctx.renderLabel,
+                            params: params.value,
+                            "callback-value": currentLabel,
+                            "custom-field-props": customFieldProps.value
+                          }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : vue.createCommentVNode("v-if", true)
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(_ctx.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, params.value)), () => [
+                        vue.createTextVNode(
+                          vue.toDisplayString(currentLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    544
+                    /* NEED_HYDRATION, NEED_PATCH */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["visible", "content", "disabled"]),
               _ctx.tooltip ? (vue.openBlock(), vue.createBlock(
                 vue.unref(ElTooltip),
                 vue.mergeProps({
-                  key: 2,
+                  key: 0,
                   placement: "top"
                 }, vue.unref(index.getTooltip)(_ctx.tooltip)),
                 {