yc-pro-components 0.0.83 → 0.0.84

package/index.js

@@ -1,4 +1,4 @@
-/*! yc-pro-components v0.0.83 */
+/*! yc-pro-components v0.0.84 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus'], factory) :
@@ -16241,6 +16241,72 @@
   );
   const getFieldComponent = (valueType) => Reflect.get(FieldComponentMap, valueType) || {};
 
+  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;
+  };
+
   const _hoisted_1$r = { class: "el-form-item__error" };
   const _hoisted_2$i = { class: "plus-form-item__label" };
   const _hoisted_3$e = {
@@ -16251,6 +16317,7 @@
     key: 1,
     class: "plus-form-item-field"
   };
+  const TOOLTIP_SHOW_DELAY = 300;
   var _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "PlusFormItem"
@@ -16297,6 +16364,85 @@
       const customFieldPropsIsReady = vue.ref(false);
       const valueIsReady = vue.ref(false);
       const labelValue = vue.computed(() => getLabel$1(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 = 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(TableFormFieldRefInjectionKey, {});
       const tableRowInfo = vue.inject(TableFormRowInfoInjectionKey, {});
       const params = vue.computed(() => ({
@@ -16465,212 +16611,143 @@
           "label-width": _ctx.hasLabel ? (_a = customFormItemProps.value) == null ? void 0 : _a.labelWidth : "0px"
         }), vue.createSlots({
           default: vue.withCtx(() => [
-            _ctx.renderField && vue.unref(isFunction)(_ctx.renderField) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$e, [
-              valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(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(getFieldSlotName)(_ctx.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$b, [
-              vue.renderSlot(_ctx.$slots, vue.unref(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(isFunction)(option.fieldItemProps) ? option.fieldItemProps(option) : option.fieldItemProps
-                                ), {
-                                  default: vue.withCtx(() => [
-                                    vue.unref(isFunction)(option.fieldSlot) ? (vue.openBlock(), vue.createBlock(
-                                      vue.resolveDynamicComponent(option.fieldSlot),
-                                      vue.normalizeProps(vue.mergeProps({ key: 0 }, option)),
-                                      null,
-                                      16
-                                      /* FULL_PROPS */
-                                    )) : vue.unref(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(isFunction)(item.fieldItemProps) ? item.fieldItemProps(item) : item.fieldItemProps
-                        ), {
-                          default: vue.withCtx(() => [
-                            vue.unref(isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(
-                              vue.resolveDynamicComponent(item.fieldSlot),
-                              vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
-                              null,
-                              16
-                              /* FULL_PROPS */
-                            )) : vue.unref(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(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(getFieldComponent)(_ctx.valueType).children ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
-                  key: 0,
+                _ctx.renderField && vue.unref(isFunction)(_ctx.renderField) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$e, [
+                  valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(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(getFieldSlotName)(_ctx.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$b, [
+                  vue.renderSlot(_ctx.$slots, vue.unref(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(getFieldComponent)(_ctx.valueType).children),
-                          vue.mergeProps({
-                            key: item.value
-                          }, getChildrenProps(item)),
+                        return vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
                           {
-                            default: vue.withCtx(() => [
-                              vue.unref(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(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(isFunction)(option.fieldItemProps) ? option.fieldItemProps(option) : option.fieldItemProps
+                                    ), {
+                                      default: vue.withCtx(() => [
+                                        vue.unref(isFunction)(option.fieldSlot) ? (vue.openBlock(), vue.createBlock(
+                                          vue.resolveDynamicComponent(option.fieldSlot),
+                                          vue.normalizeProps(vue.mergeProps({ key: 0 }, option)),
+                                          null,
+                                          16
+                                          /* FULL_PROPS */
+                                        )) : vue.unref(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(isFunction)(item.fieldItemProps) ? item.fieldItemProps(item) : item.fieldItemProps
+                            ), {
+                              default: vue.withCtx(() => [
+                                vue.unref(isFunction)(item.fieldSlot) ? (vue.openBlock(), vue.createBlock(
+                                  vue.resolveDynamicComponent(item.fieldSlot),
+                                  vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
+                                  null,
+                                  16
+                                  /* FULL_PROPS */
+                                )) : vue.unref(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
@@ -16684,27 +16761,76 @@
                     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(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(getFieldComponent)(_ctx.valueType).component), vue.mergeProps({
+                    vue.createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
+                    vue.createCommentVNode(" has-children  "),
+                    vue.unref(getFieldComponent)(_ctx.valueType).children ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(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(getFieldComponent)(_ctx.valueType).children),
+                              vue.mergeProps({
+                                key: item.value
+                              }, getChildrenProps(item)),
+                              {
+                                default: vue.withCtx(() => [
+                                  vue.unref(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(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 */
                     }, [
@@ -16713,88 +16839,129 @@
                           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(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 */
@@ -16816,31 +16983,57 @@
             name: "label",
             fn: vue.withCtx(({ label: currentLabel }) => [
               vue.createElementVNode("span", _hoisted_2$i, [
-                _ctx.renderLabel && vue.unref(isFunction)(_ctx.renderLabel) ? (vue.openBlock(), vue.createElementBlock(
-                  vue.Fragment,
-                  { key: 0 },
-                  [
-                    valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(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(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(isFunction)(_ctx.renderLabel) ? (vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
+                          { key: 0 },
+                          [
+                            valueIsReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(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(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(getTooltip)(_ctx.tooltip)),
                   {
@@ -64739,7 +64932,7 @@
     });
   }
 
-  const version = "0.0.83";
+  const version = "0.0.84";
 
   const install = installer.install;