@farm-investimentos/front-mfe-components-vue3 1.4.0 → 1.4.1

package/dist/front-mfe-components.umd.js

@@ -2754,7 +2754,7 @@ __webpack_require__.d(__webpack_exports__, {
   TextArea: function() { return /* reexport */ TextArea_TextArea; },
   TextFieldV2: function() { return /* reexport */ TextFieldV2_TextFieldV2; },
   ToggleButton: function() { return /* reexport */ ToggleButton_ToggleButton; },
-  Tooltip: function() { return /* reexport */ Tooltip_Tooltip; },
+  Tooltip: function() { return /* reexport */ components_Tooltip; },
   Typography: function() { return /* reexport */ Typography_Typography; },
   ValueCaption: function() { return /* reexport */ ValueCaption_ValueCaption; }
 });
@@ -6908,6 +6908,353 @@ const TableContextMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(T
 ;// CONCATENATED MODULE: ./src/components/TableContextMenu/index.ts
 
 /* harmony default export */ var components_TableContextMenu = (TableContextMenu);
+;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??clonedRuleSet-89.use[0]!./node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-89.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/Tooltip/Tooltip.vue?vue&type=script&setup=true&lang=ts
+
+
+
+
+const Tooltipvue_type_script_setup_true_lang_ts_withScopeId = n => (_pushScopeId("data-v-46d8db88"), n = n(), _popScopeId(), n);
+const Tooltipvue_type_script_setup_true_lang_ts_hoisted_1 = {
+  key: 0,
+  class: "tooltip-header"
+};
+const Tooltipvue_type_script_setup_true_lang_ts_hoisted_2 = {
+  key: 0,
+  class: "tooltip-title"
+};
+const Tooltipvue_type_script_setup_true_lang_ts_hoisted_3 = {
+  class: "tooltip-content"
+};
+
+const ARROW_OFFSET = 18;
+const Z_INDEX_OFFSET = 1000;
+const DEFAULT_Z_INDEX = 10001;
+/* harmony default export */ var Tooltipvue_type_script_setup_true_lang_ts = (/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  ...{
+    name: 'farm-tooltip'
+  },
+  __name: 'Tooltip',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
+    trigger: {
+      default: 'hover'
+    },
+    placement: {
+      default: 'top-center'
+    },
+    offset: {
+      default: 8
+    },
+    variant: {
+      default: 'dark'
+    },
+    size: {
+      default: 'md'
+    },
+    maxWidth: {
+      default: undefined
+    },
+    delay: {
+      default: () => [100, 50]
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    fluid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "show", "hide"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.useSlots)();
+    const containerRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
+    const activatorRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
+    const tooltipRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
+    const scrollableElementsRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
+    let modalCache = null;
+    const isVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(false);
+    const isControlled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => props.modelValue !== undefined);
+    const hasTitle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => !!slots.title);
+    const showCloseButton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => isControlled.value && hasTitle.value);
+    const normalizedMaxWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      if (props.fluid) {
+        return '300px';
+      }
+      return props.maxWidth;
+    });
+    const tooltipClasses = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => ({
+      'tooltip-popup': true,
+      'tooltip-popup--visible': isVisible.value,
+      [`tooltip-popup--${props.variant}`]: true,
+      [`tooltip-popup--${props.size}`]: true,
+      'tooltip-popup--has-title': hasTitle.value,
+      [`tooltip-popup--${props.placement}`]: true
+    }));
+    const tooltipStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const styles = {
+        position: 'fixed',
+        zIndex: String(getTooltipZIndex())
+      };
+      if (normalizedMaxWidth.value) {
+        styles.maxWidth = typeof normalizedMaxWidth.value === 'number' ? `${normalizedMaxWidth.value}px` : normalizedMaxWidth.value;
+        styles.width = 'auto';
+      }
+      return styles;
+    });
+    const arrowStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const [verticalPos] = props.placement.split('-');
+      const arrowColor = props.variant === 'light' ? '#ffffff' : '#333333';
+      const styles = {
+        position: 'absolute',
+        width: '0',
+        height: '0',
+        borderStyle: 'solid',
+        zIndex: 'inherit'
+      };
+      if (verticalPos === 'top') {
+        styles.bottom = '-6px';
+        styles.borderWidth = '6px 6px 0 6px';
+        styles.borderColor = `${arrowColor} transparent transparent transparent`;
+      } else {
+        styles.top = '-6px';
+        styles.borderWidth = '0 6px 6px 6px';
+        styles.borderColor = `transparent transparent ${arrowColor} transparent`;
+      }
+      styles.left = '50%';
+      styles.transform = 'translateX(-50%)';
+      return styles;
+    });
+    const getTooltipZIndex = () => {
+      const now = Date.now();
+      let modals;
+      if (modalCache && now - modalCache.timestamp < 500) {
+        modals = modalCache.modals;
+      } else {
+        modals = Array.from(document.querySelectorAll('.farm-modal'));
+        modalCache = {
+          modals,
+          timestamp: now
+        };
+      }
+      let maxModalZIndex = 0;
+      modals.forEach(modal => {
+        const htmlModal = modal;
+        let zIndex = parseInt(htmlModal.style.zIndex, 10);
+        if (Number.isNaN(zIndex)) {
+          const computedZIndex = window.getComputedStyle(htmlModal).zIndex;
+          if (computedZIndex === 'auto') {
+            zIndex = 0;
+          } else {
+            zIndex = parseInt(computedZIndex, 10) || 0;
+          }
+        }
+        if (zIndex > maxModalZIndex) {
+          maxModalZIndex = zIndex;
+        }
+      });
+      return maxModalZIndex > 0 ? maxModalZIndex + Z_INDEX_OFFSET : DEFAULT_Z_INDEX;
+    };
+    const calculateTooltipPosition = (activatorRect, tooltipRect, placement, offset = 8) => {
+      const [verticalPos, horizontalAlign] = placement.split('-');
+      let left = 0;
+      let top = 0;
+      if (verticalPos === 'top') {
+        top = activatorRect.top - tooltipRect.height - offset;
+      } else {
+        top = activatorRect.bottom + offset;
+      }
+      switch (horizontalAlign) {
+        case 'left':
+          left = activatorRect.left + activatorRect.width / 2 - ARROW_OFFSET;
+          break;
+        case 'right':
+          left = activatorRect.left + activatorRect.width / 2 - (tooltipRect.width - ARROW_OFFSET);
+          break;
+        case 'center':
+        default:
+          left = activatorRect.left + activatorRect.width / 2 - tooltipRect.width / 2;
+          break;
+      }
+      if (left < offset) left = offset;
+      if (left + tooltipRect.width > window.innerWidth - offset) {
+        left = window.innerWidth - tooltipRect.width - offset;
+      }
+      return {
+        left,
+        top
+      };
+    };
+    const moveToBody = element => {
+      if (element.parentNode !== document.body) {
+        document.body.appendChild(element);
+      }
+    };
+    const moveToContainer = (element, container) => {
+      if (element.parentNode === document.body) {
+        container.appendChild(element);
+      }
+    };
+    const show = () => {
+      if (props.disabled || isControlled.value) return;
+      isVisible.value = true;
+      emit('show');
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        if (tooltipRef.value && activatorRef.value) {
+          moveToBody(tooltipRef.value);
+          updatePosition();
+          addScrollListener();
+        }
+      });
+    };
+    const hide = () => {
+      if (props.disabled || isControlled.value) return;
+      isVisible.value = false;
+      emit('hide');
+      removeScrollListener();
+    };
+    const close = () => {
+      if (isControlled.value) {
+        emit('update:modelValue', false);
+      } else {
+        hide();
+      }
+    };
+    const updatePosition = () => {
+      if (!activatorRef.value || !tooltipRef.value) return;
+      const activatorRect = activatorRef.value.getBoundingClientRect();
+      const tooltipRect = tooltipRef.value.getBoundingClientRect();
+      const isActivatorVisible = activatorRect.top < window.innerHeight && activatorRect.bottom > 0 && activatorRect.left < window.innerWidth && activatorRect.right > 0;
+      if (!isActivatorVisible && isVisible.value && !isControlled.value) {
+        hide();
+        return;
+      }
+      const position = calculateTooltipPosition(activatorRect, tooltipRect, props.placement, props.offset);
+      tooltipRef.value.style.left = `${position.left}px`;
+      tooltipRef.value.style.top = `${position.top}px`;
+      updateArrowPosition(activatorRect, position);
+    };
+    const updateArrowPosition = (activatorRect, tooltipPosition) => {
+      if (!tooltipRef.value) return;
+      const arrow = tooltipRef.value.querySelector('.tooltip-arrow');
+      if (!arrow) return;
+      const activatorCenterX = activatorRect.left + activatorRect.width / 2;
+      const arrowX = activatorCenterX - tooltipPosition.left;
+      const tooltipWidth = tooltipRef.value.offsetWidth;
+      const minArrowX = 12;
+      const maxArrowX = tooltipWidth - 12;
+      const clampedArrowX = Math.max(minArrowX, Math.min(maxArrowX, arrowX));
+      arrow.style.left = `${clampedArrowX}px`;
+      arrow.style.transform = 'translateX(-50%)';
+    };
+    const getScrollableElements = () => {
+      if (!scrollableElementsRef.value) {
+        const nodeList = document.querySelectorAll('.farm-modal, .modal-content, [style*="overflow-y: auto"], [style*="overflow-y: scroll"]');
+        scrollableElementsRef.value = Array.from(nodeList);
+      }
+      return scrollableElementsRef.value;
+    };
+    const addScrollListener = () => {
+      window.addEventListener('scroll', updatePosition, {
+        passive: true
+      });
+      const scrollableElements = getScrollableElements();
+      scrollableElements.forEach(element => {
+        element.addEventListener('scroll', updatePosition, {
+          passive: true
+        });
+      });
+    };
+    const removeScrollListener = () => {
+      window.removeEventListener('scroll', updatePosition);
+      const scrollableElements = getScrollableElements();
+      scrollableElements.forEach(element => {
+        element.removeEventListener('scroll', updatePosition);
+      });
+    };
+    if (isControlled.value) {
+      isVisible.value = props.modelValue || false;
+    }
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, newValue => {
+      if (isControlled.value) {
+        isVisible.value = newValue || false;
+        if (isVisible.value) {
+          (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+            if (tooltipRef.value) {
+              moveToBody(tooltipRef.value);
+              updatePosition();
+              addScrollListener();
+            }
+          });
+        } else {
+          removeScrollListener();
+        }
+      }
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      if (tooltipRef.value && containerRef.value) {
+        moveToContainer(tooltipRef.value, containerRef.value);
+      }
+      removeScrollListener();
+    });
+    return (_ctx, _cache) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+        class: "tooltip-container",
+        ref_key: "containerRef",
+        ref: containerRef
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+        ref_key: "activatorRef",
+        ref: activatorRef,
+        class: "tooltip-activator",
+        onMouseover: show,
+        onMouseout: hide,
+        onMouseleave: hide
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "activator")], 544), isVisible.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+        key: 0,
+        ref_key: "tooltipRef",
+        ref: tooltipRef,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(tooltipClasses.value),
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(tooltipStyles.value)
+      }, [hasTitle.value || showCloseButton.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_1, [hasTitle.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "title")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), showCloseButton.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+        key: 1,
+        class: "tooltip-close",
+        onClick: close
+      }, "×")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+        class: "tooltip-arrow",
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(arrowStyles.value)
+      }, null, 4)], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 512);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue?vue&type=script&setup=true&lang=ts
+ 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-69.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-69.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-69.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-69.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/Tooltip/Tooltip.vue?vue&type=style&index=0&id=46d8db88&lang=scss&scoped=true
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue?vue&type=style&index=0&id=46d8db88&lang=scss&scoped=true
+
+;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue
+
+
+
+;
+
+
+const Tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(Tooltipvue_type_script_setup_true_lang_ts, [['__scopeId',"data-v-46d8db88"]])
+
+/* harmony default export */ var Tooltip = (Tooltip_exports_);
+;// CONCATENATED MODULE: ./src/components/Tooltip/index.ts
+
+
+/* harmony default export */ var components_Tooltip = (Tooltip);
 ;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??clonedRuleSet-89.use[0]!./node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-89.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/AlertBox/AlertBox.vue?vue&type=script&lang=ts&setup=true
 
 
@@ -12853,438 +13200,85 @@ function InputDecimalFormattervue_type_template_id_98371fda_scoped_true_ts_true_
       innerValue.value = props.modelValue;
       validate(innerValue.value);
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => innerValue.value, () => {
-      emit('update:modelValue', innerValue.value);
-      validate(innerValue.value);
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.rules, (newVal, oldVal) => {
-      if (composition_deepEqual(newVal, oldVal)) return;
-      fieldValidator = validateFormFieldBuilder(rules.value);
-      validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
-      validate(innerValue.value);
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeMount)(() => {
-      validate(innerValue.value);
-    });
-    let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
-    const onKeyUp = event => {
-      isTouched.value = true;
-      emit('keyup', event);
-      setTimeout(() => {
-        emit('change', innerValue.value);
-      }, 100);
-    };
-    const onBlur = event => {
-      isBlured.value = true;
-      emit('blur', event);
-    };
-    const onFocus = focus => {
-      isFocus.value = focus;
-    };
-    const reset = () => {
-      innerValue.value = '';
-      isTouched.value = true;
-      emit('update:modelValue', innerValue.value);
-    };
-    const makePristine = () => {
-      isTouched.value = false;
-      isBlured.value = false;
-    };
-    return {
-      innerValue,
-      errorBucket,
-      valid,
-      validatable,
-      hasError,
-      customId,
-      isTouched,
-      isBlured,
-      isFocus,
-      showErrorText,
-      validate,
-      onKeyUp,
-      onBlur,
-      onFocus,
-      reset,
-      makePristine
-    };
-  }
-});
-;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=script&lang=ts
- 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-69.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-69.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-69.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-69.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=style&index=0&id=98371fda&lang=scss&scoped=true
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=style&index=0&id=98371fda&lang=scss&scoped=true
-
-;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue
-
-
-
-
-;
-
-
-const InputDecimalFormatter_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(InputDecimalFormattervue_type_script_lang_ts, [['render',InputDecimalFormattervue_type_template_id_98371fda_scoped_true_ts_true_render],['__scopeId',"data-v-98371fda"]])
-
-/* harmony default export */ var InputDecimalFormatter_InputDecimalFormatter = (InputDecimalFormatter_exports_);
-;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/index.ts
-
-
-/* harmony default export */ var components_InputDecimalFormatter = ((/* unused pure expression or super */ null && (InputDecimalFormatter)));
-;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??clonedRuleSet-89.use[0]!./node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-89.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/Tooltip/Tooltip.vue?vue&type=script&setup=true&lang=ts
-
-
-
-
-const Tooltipvue_type_script_setup_true_lang_ts_withScopeId = n => (_pushScopeId("data-v-0953d2f7"), n = n(), _popScopeId(), n);
-const Tooltipvue_type_script_setup_true_lang_ts_hoisted_1 = {
-  key: 0,
-  class: "tooltip-header"
-};
-const Tooltipvue_type_script_setup_true_lang_ts_hoisted_2 = {
-  key: 0,
-  class: "tooltip-title"
-};
-const Tooltipvue_type_script_setup_true_lang_ts_hoisted_3 = {
-  class: "tooltip-content"
-};
-
-const ARROW_OFFSET = 18;
-const Z_INDEX_OFFSET = 1000;
-const DEFAULT_Z_INDEX = 10001;
-/* harmony default export */ var Tooltipvue_type_script_setup_true_lang_ts = (/*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
-  __name: 'Tooltip',
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: undefined
-    },
-    trigger: {
-      default: 'hover'
-    },
-    placement: {
-      default: 'top-center'
-    },
-    offset: {
-      default: 8
-    },
-    variant: {
-      default: 'dark'
-    },
-    size: {
-      default: 'md'
-    },
-    maxWidth: {
-      default: undefined
-    },
-    delay: {
-      default: () => [100, 50]
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    fluid: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      default: undefined
-    }
-  },
-  emits: ["update:modelValue", "show", "hide"],
-  setup(__props, {
-    emit: __emit
-  }) {
-    const props = __props;
-    const emit = __emit;
-    const slots = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.useSlots)();
-    const containerRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
-    const activatorRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
-    const tooltipRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
-    const scrollableElementsRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
-    let modalCache = null;
-    const isVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(false);
-    const isControlled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => props.modelValue !== undefined);
-    const hasTitle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => !!slots.title);
-    const showCloseButton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => isControlled.value && hasTitle.value);
-    const normalizedPlacement = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      if (props.position) {
-        return props.position;
-      }
-      return props.placement;
-    });
-    const normalizedMaxWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      if (props.fluid) {
-        return '300px';
-      }
-      return props.maxWidth;
-    });
-    const tooltipClasses = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => ({
-      'tooltip-popup': true,
-      'tooltip-popup--visible': isVisible.value,
-      [`tooltip-popup--${props.variant}`]: true,
-      [`tooltip-popup--${props.size}`]: true,
-      'tooltip-popup--has-title': hasTitle.value,
-      [`tooltip-popup--${normalizedPlacement.value}`]: true
-    }));
-    const tooltipStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const styles = {
-        position: 'fixed',
-        zIndex: String(getTooltipZIndex())
-      };
-      if (normalizedMaxWidth.value) {
-        styles.maxWidth = typeof normalizedMaxWidth.value === 'number' ? `${normalizedMaxWidth.value}px` : normalizedMaxWidth.value;
-        styles.width = 'auto';
-      }
-      return styles;
-    });
-    const arrowStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const [verticalPos] = normalizedPlacement.value.split('-');
-      const arrowColor = props.variant === 'light' ? '#ffffff' : '#333333';
-      const styles = {
-        position: 'absolute',
-        width: '0',
-        height: '0',
-        borderStyle: 'solid',
-        zIndex: 'inherit'
-      };
-      if (verticalPos === 'top') {
-        styles.bottom = '-6px';
-        styles.borderWidth = '6px 6px 0 6px';
-        styles.borderColor = `${arrowColor} transparent transparent transparent`;
-      } else {
-        styles.top = '-6px';
-        styles.borderWidth = '0 6px 6px 6px';
-        styles.borderColor = `transparent transparent ${arrowColor} transparent`;
-      }
-      styles.left = '50%';
-      styles.transform = 'translateX(-50%)';
-      return styles;
-    });
-    const getTooltipZIndex = () => {
-      const now = Date.now();
-      let modals;
-      if (modalCache && now - modalCache.timestamp < 500) {
-        modals = modalCache.modals;
-      } else {
-        modals = Array.from(document.querySelectorAll('.farm-modal'));
-        modalCache = {
-          modals,
-          timestamp: now
-        };
-      }
-      let maxModalZIndex = 0;
-      modals.forEach(modal => {
-        const htmlModal = modal;
-        let zIndex = parseInt(htmlModal.style.zIndex, 10);
-        if (Number.isNaN(zIndex)) {
-          const computedZIndex = window.getComputedStyle(htmlModal).zIndex;
-          if (computedZIndex === 'auto') {
-            zIndex = 0;
-          } else {
-            zIndex = parseInt(computedZIndex, 10) || 0;
-          }
-        }
-        if (zIndex > maxModalZIndex) {
-          maxModalZIndex = zIndex;
-        }
-      });
-      return maxModalZIndex > 0 ? maxModalZIndex + Z_INDEX_OFFSET : DEFAULT_Z_INDEX;
-    };
-    const calculateTooltipPosition = (activatorRect, tooltipRect, placement, offset = 8) => {
-      const [verticalPos, horizontalAlign] = placement.split('-');
-      let left = 0;
-      let top = 0;
-      if (verticalPos === 'top') {
-        top = activatorRect.top - tooltipRect.height - offset;
-      } else {
-        top = activatorRect.bottom + offset;
-      }
-      switch (horizontalAlign) {
-        case 'left':
-          left = activatorRect.left + activatorRect.width / 2 - ARROW_OFFSET;
-          break;
-        case 'right':
-          left = activatorRect.left + activatorRect.width / 2 - (tooltipRect.width - ARROW_OFFSET);
-          break;
-        case 'center':
-        default:
-          left = activatorRect.left + activatorRect.width / 2 - tooltipRect.width / 2;
-          break;
-      }
-      if (left < offset) left = offset;
-      if (left + tooltipRect.width > window.innerWidth - offset) {
-        left = window.innerWidth - tooltipRect.width - offset;
-      }
-      return {
-        left,
-        top
-      };
-    };
-    const moveToBody = element => {
-      if (element.parentNode !== document.body) {
-        document.body.appendChild(element);
-      }
-    };
-    const moveToContainer = (element, container) => {
-      if (element.parentNode === document.body) {
-        container.appendChild(element);
-      }
-    };
-    const show = () => {
-      if (props.disabled || isControlled.value) return;
-      isVisible.value = true;
-      emit('show');
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        if (tooltipRef.value && activatorRef.value) {
-          moveToBody(tooltipRef.value);
-          updatePosition();
-          addScrollListener();
-        }
-      });
-    };
-    const hide = () => {
-      if (props.disabled || isControlled.value) return;
-      isVisible.value = false;
-      emit('hide');
-      removeScrollListener();
-    };
-    const close = () => {
-      if (isControlled.value) {
-        emit('update:modelValue', false);
-      } else {
-        hide();
-      }
-    };
-    const updatePosition = () => {
-      if (!activatorRef.value || !tooltipRef.value) return;
-      const activatorRect = activatorRef.value.getBoundingClientRect();
-      const tooltipRect = tooltipRef.value.getBoundingClientRect();
-      const isActivatorVisible = activatorRect.top < window.innerHeight && activatorRect.bottom > 0 && activatorRect.left < window.innerWidth && activatorRect.right > 0;
-      if (!isActivatorVisible && isVisible.value && !isControlled.value) {
-        hide();
-        return;
-      }
-      const position = calculateTooltipPosition(activatorRect, tooltipRect, normalizedPlacement.value, props.offset);
-      tooltipRef.value.style.left = `${position.left}px`;
-      tooltipRef.value.style.top = `${position.top}px`;
-      updateArrowPosition(activatorRect, position);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => innerValue.value, () => {
+      emit('update:modelValue', innerValue.value);
+      validate(innerValue.value);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.rules, (newVal, oldVal) => {
+      if (composition_deepEqual(newVal, oldVal)) return;
+      fieldValidator = validateFormFieldBuilder(rules.value);
+      validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+      validate(innerValue.value);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeMount)(() => {
+      validate(innerValue.value);
+    });
+    let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+    const onKeyUp = event => {
+      isTouched.value = true;
+      emit('keyup', event);
+      setTimeout(() => {
+        emit('change', innerValue.value);
+      }, 100);
     };
-    const updateArrowPosition = (activatorRect, tooltipPosition) => {
-      if (!tooltipRef.value) return;
-      const arrow = tooltipRef.value.querySelector('.tooltip-arrow');
-      if (!arrow) return;
-      const activatorCenterX = activatorRect.left + activatorRect.width / 2;
-      const arrowX = activatorCenterX - tooltipPosition.left;
-      const tooltipWidth = tooltipRef.value.offsetWidth;
-      const minArrowX = 12;
-      const maxArrowX = tooltipWidth - 12;
-      const clampedArrowX = Math.max(minArrowX, Math.min(maxArrowX, arrowX));
-      arrow.style.left = `${clampedArrowX}px`;
-      arrow.style.transform = 'translateX(-50%)';
+    const onBlur = event => {
+      isBlured.value = true;
+      emit('blur', event);
     };
-    const getScrollableElements = () => {
-      if (!scrollableElementsRef.value) {
-        const nodeList = document.querySelectorAll('.farm-modal, .modal-content, [style*="overflow-y: auto"], [style*="overflow-y: scroll"]');
-        scrollableElementsRef.value = Array.from(nodeList);
-      }
-      return scrollableElementsRef.value;
+    const onFocus = focus => {
+      isFocus.value = focus;
     };
-    const addScrollListener = () => {
-      window.addEventListener('scroll', updatePosition, {
-        passive: true
-      });
-      const scrollableElements = getScrollableElements();
-      scrollableElements.forEach(element => {
-        element.addEventListener('scroll', updatePosition, {
-          passive: true
-        });
-      });
+    const reset = () => {
+      innerValue.value = '';
+      isTouched.value = true;
+      emit('update:modelValue', innerValue.value);
     };
-    const removeScrollListener = () => {
-      window.removeEventListener('scroll', updatePosition);
-      const scrollableElements = getScrollableElements();
-      scrollableElements.forEach(element => {
-        element.removeEventListener('scroll', updatePosition);
-      });
+    const makePristine = () => {
+      isTouched.value = false;
+      isBlured.value = false;
     };
-    if (isControlled.value) {
-      isVisible.value = props.modelValue || false;
-    }
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, newValue => {
-      if (isControlled.value) {
-        isVisible.value = newValue || false;
-        if (isVisible.value) {
-          (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-            if (tooltipRef.value) {
-              moveToBody(tooltipRef.value);
-              updatePosition();
-              addScrollListener();
-            }
-          });
-        } else {
-          removeScrollListener();
-        }
-      }
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
-      if (tooltipRef.value && containerRef.value) {
-        moveToContainer(tooltipRef.value, containerRef.value);
-      }
-      removeScrollListener();
-    });
-    return (_ctx, _cache) => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-        class: "tooltip-container",
-        ref_key: "containerRef",
-        ref: containerRef
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
-        ref_key: "activatorRef",
-        ref: activatorRef,
-        class: "tooltip-activator",
-        onMouseover: show,
-        onMouseout: hide,
-        onMouseleave: hide
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "activator")], 544), isVisible.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-        key: 0,
-        ref_key: "tooltipRef",
-        ref: tooltipRef,
-        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(tooltipClasses.value),
-        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(tooltipStyles.value)
-      }, [hasTitle.value || showCloseButton.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_1, [hasTitle.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "title")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), showCloseButton.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
-        key: 1,
-        class: "tooltip-close",
-        onClick: close
-      }, "×")) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", Tooltipvue_type_script_setup_true_lang_ts_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
-        class: "tooltip-arrow",
-        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)(arrowStyles.value)
-      }, null, 4)], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 512);
+    return {
+      innerValue,
+      errorBucket,
+      valid,
+      validatable,
+      hasError,
+      customId,
+      isTouched,
+      isBlured,
+      isFocus,
+      showErrorText,
+      validate,
+      onKeyUp,
+      onBlur,
+      onFocus,
+      reset,
+      makePristine
     };
   }
-}));
-;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue?vue&type=script&setup=true&lang=ts
+});
+;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=script&lang=ts
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-69.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-69.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-69.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-69.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/Tooltip/Tooltip.vue?vue&type=style&index=0&id=0953d2f7&lang=scss&scoped=true
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-69.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-69.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-69.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-69.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=style&index=0&id=98371fda&lang=scss&scoped=true
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue?vue&type=style&index=0&id=0953d2f7&lang=scss&scoped=true
+;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue?vue&type=style&index=0&id=98371fda&lang=scss&scoped=true
+
+;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/InputDecimalFormatter.vue
 
-;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.vue
 
 
 
 ;
 
 
-const Tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(Tooltipvue_type_script_setup_true_lang_ts, [['__scopeId',"data-v-0953d2f7"]])
+const InputDecimalFormatter_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(InputDecimalFormattervue_type_script_lang_ts, [['render',InputDecimalFormattervue_type_template_id_98371fda_scoped_true_ts_true_render],['__scopeId',"data-v-98371fda"]])
 
-/* harmony default export */ var Tooltip_Tooltip = (Tooltip_exports_);
-;// CONCATENATED MODULE: ./src/components/Tooltip/index.ts
+/* harmony default export */ var InputDecimalFormatter_InputDecimalFormatter = (InputDecimalFormatter_exports_);
+;// CONCATENATED MODULE: ./src/components/InputDecimalFormatter/index.ts
 
 
-/* harmony default export */ var components_Tooltip = ((/* unused pure expression or super */ null && (Tooltip)));
+/* harmony default export */ var components_InputDecimalFormatter = ((/* unused pure expression or super */ null && (InputDecimalFormatter)));
 ;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??clonedRuleSet-89.use[0]!./node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-89.use[3]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[5]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/components/Typography/Typography.vue?vue&type=template&id=bb5a0afc&scoped=true&ts=true
 
 function Typographyvue_type_template_id_bb5a0afc_scoped_true_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14550,6 +14544,7 @@ const Line_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(Linevue_type_
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js