@uzum-tech/ui 2.0.1 → 2.0.3

package/dist/index.js

@@ -54618,7 +54618,7 @@
         const chat = selectedChatRef.value;
         const keyId = toKeyString(chat?.id);
         const keyTitle = toKeyString(chat?.title);
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ vue.h(
+        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ vue.h(
           "div",
           {
             class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap`
@@ -54761,7 +54761,7 @@
               return buttons;
             })
           }
-        ));
+        )));
       };
       const renderMessages = () => {
         return /* @__PURE__ */ vue.h(
@@ -80928,6 +80928,7 @@
   }
 
   const presetProps = {
+    ...cardBaseProps,
     // put dialog props after since I want the card to unbordered by default
     ...dialogProps,
     size: {
@@ -91216,14 +91217,23 @@
     }
   });
 
-  var style$z = c$1([cB("input-number-suffix", `
-    display: inline-block;
-    margin-right: 10px;
-  `), cB("input-number-prefix", `
-    display: inline-block;
-    margin-left: 10px;
-  `)]);
-
+  const MAX_AMOUNT_INPUT_DIGITS = 16;
+  var InputNumberRegex = /* @__PURE__ */(InputNumberRegex2 => {
+    InputNumberRegex2["INPUT_WIP_VALUE"] = "^(-)?\\d+.*(\\.|0)$";
+    InputNumberRegex2["INPUT_LEADING_DOT_WIP_VALUE"] = "^\\.\\d+$";
+    InputNumberRegex2["AMOUNT_INPUT"] = "^-?[\\d\\s]*\\.?\\d*$";
+    InputNumberRegex2["AMOUNT_VALUE"] = "^-?(?:\\d+(?:\\.\\d*)?|\\.\\d+)$";
+    InputNumberRegex2["AMOUNT_RAW_LEADING_DOT"] = "^-?\\.\\d*$";
+    InputNumberRegex2["WHITESPACE"] = "\\s";
+    InputNumberRegex2["NON_DIGIT"] = "\\D";
+    InputNumberRegex2["LEADING_ZEROS"] = "^0+(?=\\d)";
+    InputNumberRegex2["NON_ZERO_DIGIT"] = "[1-9]";
+    InputNumberRegex2["TRAILING_ZERO_FRACTION"] = "\\.?0+$";
+    InputNumberRegex2["THOUSANDS_SEPARATOR"] = "\\B(?=(\\d{3})+(?!\\d))";
+    return InputNumberRegex2;
+  })(InputNumberRegex || {});
+
+  const MAX_SAFE_INTEGER_LIMIT = String(Number.MAX_SAFE_INTEGER);
   function parse(value) {
     if (value === void 0 || value === null || typeof value === "string" && value.trim() === "") {
       return null;
@@ -91231,7 +91241,7 @@
     return Number(value);
   }
   function isWipValue(value) {
-    return value.includes(".") && (/^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value));
+    return value.includes(".") && (new RegExp(InputNumberRegex.INPUT_WIP_VALUE).test(value) || new RegExp(InputNumberRegex.INPUT_LEADING_DOT_WIP_VALUE).test(value));
   }
   function validator(value) {
     if (value === void 0 || value === null) return true;
@@ -91255,6 +91265,100 @@
       }
     }
   }
+  function getPrecision(value) {
+    const fraction = String(value).split(".")[1];
+    return fraction ? fraction.length : 0;
+  }
+  function stripAmountFormatting(value) {
+    return String(value).replace(new RegExp(InputNumberRegex.WHITESPACE, "g"), "").trim();
+  }
+  function isValidAmountInput(value) {
+    return value === "" || new RegExp(InputNumberRegex.AMOUNT_INPUT).test(value);
+  }
+  function isAmountInputWithinDigitLimit(value, maxDigits = MAX_AMOUNT_INPUT_DIGITS) {
+    return value.replace(new RegExp(InputNumberRegex.NON_DIGIT, "g"), "").length <= maxDigits;
+  }
+  function getRejectedSelectionRange(prevDisplayedValue, attemptedDisplayedValue, selectionStart, selectionEnd) {
+    const removedLength = Math.max(0, attemptedDisplayedValue.length - prevDisplayedValue.length);
+    return {
+      start: Math.min(prevDisplayedValue.length, Math.max(0, selectionStart - removedLength)),
+      end: Math.min(prevDisplayedValue.length, Math.max(0, selectionEnd - removedLength))
+    };
+  }
+  function exceedsMaxSafeAmountValue(numberString) {
+    const normalized = numberString.startsWith("-") ? numberString.slice(1) : numberString;
+    const [integerPart = "0", fractionPart = ""] = normalized.split(".");
+    const normalizedIntegerPart = integerPart.replace(new RegExp(InputNumberRegex.LEADING_ZEROS), "");
+    return normalizedIntegerPart.length > MAX_SAFE_INTEGER_LIMIT.length || normalizedIntegerPart.length === MAX_SAFE_INTEGER_LIMIT.length && (normalizedIntegerPart > MAX_SAFE_INTEGER_LIMIT || normalizedIntegerPart === MAX_SAFE_INTEGER_LIMIT && new RegExp(InputNumberRegex.NON_ZERO_DIGIT).test(fractionPart));
+  }
+  function parseAmount(input) {
+    if (input === void 0 || input === null) return null;
+    const numberString = stripAmountFormatting(input);
+    if (new RegExp(InputNumberRegex.AMOUNT_VALUE).test(numberString)) {
+      if (exceedsMaxSafeAmountValue(numberString)) return Number.NaN;
+      return Number(numberString);
+    }
+    return numberString === "" ? null : Number.NaN;
+  }
+  function formatAmount(value, precision) {
+    if (value === void 0 || value === null) return "";
+    let stringValue = String(value);
+    if (precision !== void 0) {
+      stringValue = value.toFixed(precision).replace(new RegExp(InputNumberRegex.TRAILING_ZERO_FRACTION), "");
+    }
+    const negative = stringValue.startsWith("-");
+    if (negative) stringValue = stringValue.slice(1);
+    const [integerPart, fractionPart] = stringValue.split(".");
+    const integerWithSeparator = integerPart.replace(new RegExp(InputNumberRegex.THOUSANDS_SEPARATOR, "g"), " ");
+    return `${negative ? "-" : ""}${integerWithSeparator}${fractionPart ? `.${fractionPart}` : ""}`;
+  }
+  function formattedToRawIndex(formatted, caret) {
+    let raw = 0;
+    for (let i = 0; i < Math.min(caret, formatted.length); i++) {
+      if (formatted[i] !== " ") raw++;
+    }
+    return raw;
+  }
+  function rawIndexToCaret(formatted, rawIndex) {
+    if (rawIndex <= 0) return 0;
+    let raw = 0;
+    for (let i = 0; i < formatted.length; i++) {
+      if (formatted[i] !== " ") raw++;
+      if (raw === rawIndex) return i + 1;
+    }
+    return formatted.length;
+  }
+  function isRawWipValue(formatted) {
+    return isWipValue(stripAmountFormatting(formatted));
+  }
+  function mapSelectionAfterFormat(formatted, newFormatted, selectionStart, selectionEnd) {
+    const rawStart = formattedToRawIndex(formatted, selectionStart);
+    const rawEnd = formattedToRawIndex(formatted, selectionEnd);
+    const rawInput = stripAmountFormatting(formatted);
+    if (new RegExp(InputNumberRegex.AMOUNT_RAW_LEADING_DOT).test(rawInput)) {
+      const {
+        length
+      } = newFormatted;
+      return {
+        start: length,
+        end: length
+      };
+    }
+    const newStart = rawIndexToCaret(newFormatted, rawStart);
+    const newEnd = rawIndexToCaret(newFormatted, rawEnd);
+    return {
+      start: newStart,
+      end: newEnd
+    };
+  }
+
+  var style$z = c$1([cB("input-number-suffix", `
+    display: inline-block;
+    margin-right: 10px;
+  `), cB("input-number-prefix", `
+    display: inline-block;
+    margin-left: 10px;
+  `)]);
 
   const HOLDING_CHANGE_THRESHOLD = 800;
   const HOLDING_CHANGE_INTERVAL = 100;
@@ -91305,6 +91409,10 @@
       type: Boolean,
       default: true
     },
+    type: {
+      type: String,
+      default: "default"
+    },
     parse: Function,
     format: Function,
     precision: Number,
@@ -91354,10 +91462,6 @@
         uncontrolledValueRef
       );
       const displayedValueRef = vue.ref("");
-      const getPrecision = (value) => {
-        const fraction = String(value).split(".")[1];
-        return fraction ? fraction.length : 0;
-      };
       const getMaxPrecision = (currentValue) => {
         const precisions = [props.min, props.max, props.step, currentValue].map(
           (value) => {
@@ -91393,6 +91497,39 @@
           return parsedNumber;
         else return null;
       });
+      const isAmountTypeRef = useMemo(() => props.type === "amount");
+      const showButtonRef = useMemo(() => {
+        return isAmountTypeRef.value ? false : props.showButton;
+      });
+      const effectiveParse = (input) => {
+        if (props.parse) return props.parse(input);
+        if (isAmountTypeRef.value) return parseAmount(input);
+        return parse(input);
+      };
+      const effectiveFormat = (value, precision) => {
+        if (props.format && value !== void 0) return props.format(value);
+        if (isAmountTypeRef.value) return formatAmount(value, precision);
+        return format(value, precision);
+      };
+      const doUpdateValue = (value) => {
+        const { value: mergedValue } = mergedValueRef;
+        if (value === mergedValue) {
+          deriveDisplayedValueFromValue();
+          return;
+        }
+        const {
+          "onUpdate:value": _onUpdateValue,
+          onUpdateValue,
+          onChange
+        } = props;
+        const { triggerFormInput, triggerFormChange } = formItem;
+        if (onChange) call(onChange, value);
+        if (onUpdateValue) call(onUpdateValue, value);
+        if (_onUpdateValue) call(_onUpdateValue, value);
+        uncontrolledValueRef.value = value;
+        triggerFormInput();
+        triggerFormChange();
+      };
       const deriveValueFromDisplayedValue = ({
         offset,
         doUpdateIfValid,
@@ -91403,7 +91540,7 @@
         if (isInputing && isWipValue(displayedValue)) {
           return false;
         }
-        const parsedValue = (props.parse || parse)(displayedValue);
+        const parsedValue = effectiveParse(displayedValue);
         if (parsedValue === null) {
           if (doUpdateIfValid)
             doUpdateValue(null);
@@ -91445,43 +91582,70 @@
       const deriveDisplayedValueFromValue = () => {
         const { value: mergedValue } = mergedValueRef;
         if (validator(mergedValue)) {
-          const { format: formatProp, precision } = props;
-          if (formatProp) {
-            displayedValueRef.value = formatProp(mergedValue);
-          } else {
-            if (mergedValue === null || precision === void 0 || getPrecision(mergedValue) > precision) {
-              displayedValueRef.value = format(mergedValue, void 0);
-            } else {
-              displayedValueRef.value = format(mergedValue, precision);
-            }
-          }
+          const { precision } = props;
+          displayedValueRef.value = effectiveFormat(
+            mergedValue,
+            mergedValue === null ? void 0 : precision
+          );
         } else {
           displayedValueRef.value = String(mergedValue);
         }
       };
-      deriveDisplayedValueFromValue();
-      function doUpdateValue(value) {
-        const { value: mergedValue } = mergedValueRef;
-        if (value === mergedValue) {
-          deriveDisplayedValueFromValue();
-          return;
+      const computeValueToFormat = (prev, derived) => {
+        if (derived !== false && derived !== null) return derived;
+        if (!isAmountTypeRef.value) return null;
+        const parsed = effectiveParse(prev);
+        if (parsed === null || Number.isNaN(parsed)) return null;
+        return parsed;
+      };
+      const setInputValueSelection = (value, selectionStart, selectionEnd) => {
+        const inputElement = inputInstRef.value?.inputElRef;
+        if (!inputElement) return;
+        inputElement.value = value;
+        inputElement.setSelectionRange(selectionStart, selectionEnd);
+      };
+      const applyFormatted = (prev, valueNumber) => {
+        const inputElement = inputInstRef.value?.inputElRef;
+        const selectionStart = inputElement?.selectionStart ?? prev.length;
+        const selectionEnd = inputElement?.selectionEnd ?? selectionStart;
+        const newFormatted = effectiveFormat(valueNumber, props.precision);
+        displayedValueRef.value = newFormatted;
+        void vue.nextTick(() => {
+          const { start, end } = mapSelectionAfterFormat(
+            prev,
+            newFormatted,
+            selectionStart,
+            selectionEnd
+          );
+          inputElement?.setSelectionRange(start, end);
+        });
+      };
+      const restoreRejectedAmountInput = (prevDisplayedValue, attemptedDisplayedValue) => {
+        const inputElement = inputInstRef.value?.inputElRef;
+        const selectionStart = inputElement?.selectionStart ?? attemptedDisplayedValue.length;
+        const selectionEnd = inputElement?.selectionEnd ?? selectionStart;
+        const { start, end } = getRejectedSelectionRange(
+          prevDisplayedValue,
+          attemptedDisplayedValue,
+          selectionStart,
+          selectionEnd
+        );
+        displayedValueRef.value = prevDisplayedValue;
+        setInputValueSelection(prevDisplayedValue, start, end);
+        void vue.nextTick(() => {
+          setInputValueSelection(prevDisplayedValue, start, end);
+        });
+      };
+      const shouldRejectAmountInput = (value) => {
+        if (!isValidAmountInput(value)) return true;
+        if (!isAmountInputWithinDigitLimit(value, MAX_AMOUNT_INPUT_DIGITS)) {
+          return true;
         }
-        const {
-          "onUpdate:value": _onUpdateValue,
-          onUpdateValue,
-          onChange
-        } = props;
-        const { triggerFormInput, triggerFormChange } = formItem;
-        if (onChange)
-          call(onChange, value);
-        if (onUpdateValue)
-          call(onUpdateValue, value);
-        if (_onUpdateValue)
-          call(_onUpdateValue, value);
-        uncontrolledValueRef.value = value;
-        triggerFormInput();
-        triggerFormChange();
-      }
+        if (props.precision === void 0) return false;
+        const parsedValue = effectiveParse(value);
+        return parsedValue !== null && !Number.isNaN(parsedValue) && getPrecision(parsedValue) > props.precision;
+      };
+      deriveDisplayedValueFromValue();
       const displayedValueInvalidRef = useMemo(() => {
         const derivedValue = deriveValueFromDisplayedValue({
           offset: 0,
@@ -91733,15 +91897,30 @@
           }
         }
       }
+      const shouldTryFormat = () => props.updateValueOnInput && !props.format && !props.parse && (props.precision === void 0 || isAmountTypeRef.value);
       function handleUpdateDisplayedValue(value) {
+        const prevDisplayedValue = displayedValueRef.value;
+        const prevFormatted = value;
+        if (isAmountTypeRef.value) {
+          if (shouldRejectAmountInput(value)) {
+            restoreRejectedAmountInput(prevDisplayedValue, value);
+            return;
+          }
+        }
         displayedValueRef.value = value;
-        if (props.updateValueOnInput && !props.format && !props.parse && props.precision === void 0) {
-          deriveValueFromDisplayedValue({
-            offset: 0,
-            doUpdateIfValid: true,
-            isInputing: true,
-            fixPrecision: false
-          });
+        if (!shouldTryFormat()) return;
+        if (isAmountTypeRef.value) {
+          if (isRawWipValue(prevFormatted)) return;
+        }
+        const derived = deriveValueFromDisplayedValue({
+          offset: 0,
+          doUpdateIfValid: true,
+          isInputing: true,
+          fixPrecision: false
+        });
+        const valueToFormat = computeValueToFormat(prevFormatted, derived);
+        if (valueToFormat !== null && isAmountTypeRef.value) {
+          applyFormatted(prevFormatted, valueToFormat);
         }
       }
       vue.watch(mergedValueRef, () => {
@@ -91774,6 +91953,7 @@
         displayedValue: displayedValueRef,
         addable: addableRef,
         minusable: minusableRef,
+        showButton: showButtonRef,
         mergedStatus: mergedStatusRef,
         handleFocus,
         handleBlur,
@@ -95247,7 +95427,8 @@
     gap: {
       type: Number,
       default: 16
-    }
+    },
+    emptyProps: Object
   };
 
   var MappingCardBody = vue.defineComponent({
@@ -96012,9 +96193,16 @@
     color: var(--u-arrow-color);
     font-size: 16px;
     flex-shrink: 0;
-  `)]), cB("mapping-card-list", [cE("pagination", `
-    margin-top: 16px;
-  `)])]);
+  `)]), cB("mapping-card-list", `
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+  `, [cE("pagination", `
+      margin-top: 16px;
+    `), cE("empty", `
+      margin: auto;
+    `)])]);
 
   var _UMappingCard = vue.defineComponent({
     name: "MappingCard",
@@ -96105,8 +96293,18 @@
       };
     },
     render() {
-      const { mergedClsPrefix, mergedPagination, gap, items } = this;
-      return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-mapping-card-list` }, /* @__PURE__ */ vue.h(
+      const {
+        mergedClsPrefix,
+        mergedPagination,
+        gap,
+        items,
+        emptyProps,
+        $slots
+      } = this;
+      const isEmpty = !items.length;
+      return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-mapping-card-list` }, isEmpty ? /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-mapping-card-list__empty` }, resolveSlot($slots.empty, () => [
+        /* @__PURE__ */ vue.h(UEmpty$1, { size: "large", ...emptyProps })
+      ])) : /* @__PURE__ */ vue.h(
         _UFlex,
         {
           vertical: true,
@@ -111201,6 +111399,7 @@
   const notificationEnvOptions = {
     ...notificationProps,
     duration: Number,
+    pauseOnVisibilityChange: Boolean,
     onClose: Function,
     onLeave: Function,
     onAfterEnter: Function,
@@ -111230,10 +111429,45 @@
       const { wipTransitionCountRef } = vue.inject(notificationProviderInjectionKey);
       const showRef = vue.ref(true);
       let timerId = null;
+      let remainingDuration = null;
+      let timerStartedAt = null;
+      let timerPausedForVisibility = false;
+      function clearTimer() {
+        if (timerId !== null) {
+          window.clearTimeout(timerId);
+          timerId = null;
+        }
+      }
       function hide() {
         showRef.value = false;
-        if (timerId) {
-          window.clearTimeout(timerId);
+        clearTimer();
+      }
+      function startTimer(duration) {
+        clearTimer();
+        remainingDuration = duration;
+        timerStartedAt = Date.now();
+        timerId = window.setTimeout(hide, duration);
+      }
+      function handleVisibilityChange() {
+        if (document.visibilityState === "hidden") {
+          if (timerId !== null) {
+            clearTimer();
+            if (timerStartedAt !== null && remainingDuration !== null) {
+              remainingDuration = Math.max(
+                0,
+                remainingDuration - (Date.now() - timerStartedAt)
+              );
+            }
+            timerStartedAt = null;
+            timerPausedForVisibility = true;
+          }
+        } else if (timerPausedForVisibility) {
+          timerPausedForVisibility = false;
+          if (remainingDuration !== null && remainingDuration > 0) {
+            startTimer(remainingDuration);
+          } else {
+            hide();
+          }
         }
       }
       function handleBeforeEnter(el) {
@@ -111282,16 +111516,13 @@
       function setHideTimeout() {
         const { duration } = props;
         if (duration) {
-          timerId = window.setTimeout(hide, duration);
+          startTimer(duration);
         }
       }
       function handleMouseenter(e) {
         if (e.currentTarget !== e.target)
           return;
-        if (timerId !== null) {
-          window.clearTimeout(timerId);
-          timerId = null;
-        }
+        clearTimer();
       }
       function handleMouseleave(e) {
         if (e.currentTarget !== e.target)
@@ -111312,9 +111543,15 @@
       }
       vue.onMounted(() => {
         if (props.duration) {
-          timerId = window.setTimeout(hide, props.duration);
+          startTimer(props.duration);
+        }
+        if (props.pauseOnVisibilityChange) {
+          document.addEventListener("visibilitychange", handleVisibilityChange);
         }
       });
+      vue.onBeforeUnmount(() => {
+        document.removeEventListener("visibilitychange", handleVisibilityChange);
+      });
       return {
         show: showRef,
         hide,
@@ -111360,12 +111597,16 @@
   var style = c$1([cB("notification-container", `
     z-index: 4000;
     position: fixed;
+    left: 0;
+    right: 0;
     overflow: visible;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    pointer-events: none;
   `, [c$1(">", [cB("scrollbar", `
-        width: initial;
+        width: -moz-fit-content;
+        width: fit-content;
         overflow: visible;
         height: -moz-fit-content !important;
         height: fit-content !important;
@@ -111391,8 +111632,7 @@
         margin-bottom: 0;
         margin-top: 12px;
       `)]), cM("top, bottom", `
-      left: 50%;
-      transform: translateX(-50%);
+      align-items: center;
     `, [cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
           transform: scale(0.85);
         `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
@@ -111401,15 +111641,11 @@
         transform-origin: top center;
       `)]), cM("bottom", [cB("notification-wrapper", `
         transform-origin: bottom center;
-      `)]), cM("top-right", `
-      right: 0;
-    `, [placementTransformStyle("top-right")]), cM("top-left", `
-      left: 0;
-    `, [placementTransformStyle("top-left")]), cM("bottom-right", `
-      right: 0;
-    `, [placementTransformStyle("bottom-right")]), cM("bottom-left", `
-      left: 0;
-    `, [placementTransformStyle("bottom-left")]), cM("scrollable", [cM("top-right", `
+      `)]), cM("top-right, bottom-right", `
+      align-items: flex-end;
+    `), cM("top-left, bottom-left", `
+      align-items: flex-start;
+    `), cM("scrollable", [cM("top-right", `
         top: 0;
       `), cM("top-left", `
         top: 0;
@@ -111446,6 +111682,7 @@
       `)]), cB("notification", `
       background-color: var(--u-color);
       color: var(--u-text-color);
+      pointer-events: auto;
       transition:
         background-color .3s var(--u-bezier),
         color .3s var(--u-bezier),
@@ -111544,16 +111781,6 @@
         `, [c$1("&:first-child", {
     margin: 0
   })])])])])]);
-  function placementTransformStyle(placement) {
-    const direction = placement.split("-")[1];
-    const transformXEnter = direction === "left" ? "calc(-100%)" : "calc(100%)";
-    const transformXLeave = "0";
-    return cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
-      transform: translate(${transformXEnter}, 0);
-    `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
-      transform: translate(${transformXLeave}, 0);
-    `)]);
-  }
 
   const notificationApiInjectionKey = createInjectionKey("u-notification-api");
   const notificationProviderProps = {
@@ -112398,7 +112625,7 @@
     });
   }
 
-  var version = "2.0.0";
+  var version = "2.0.3";
 
   function create({
     componentPrefix = "U",