@uzum-tech/ui 2.0.0 → 2.0.2

package/dist/index.mjs

@@ -54614,7 +54614,7 @@ var ChatMainArea = defineComponent({
       const chat = selectedChatRef.value;
       const keyId = toKeyString(chat?.id);
       const keyTitle = toKeyString(chat?.title);
-      return /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ h(
+      return /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header-inner` }, /* @__PURE__ */ h(
         "div",
         {
           class: `${mergedClsPrefixRef.value}-chat-main__header-title-wrap`
@@ -54757,7 +54757,7 @@ var ChatMainArea = defineComponent({
             return buttons;
           })
         }
-      ));
+      )));
     };
     const renderMessages = () => {
       return /* @__PURE__ */ h(
@@ -80924,6 +80924,7 @@ function useDragModal(draggablePropsRef, options) {
 }
 
 const presetProps = {
+  ...cardBaseProps,
   // put dialog props after since I want the card to unbordered by default
   ...dialogProps,
   size: {
@@ -91212,14 +91213,23 @@ var _UInfiniteScroll = defineComponent({
   }
 });
 
-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;
@@ -91227,7 +91237,7 @@ function parse(value) {
   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;
@@ -91251,6 +91261,100 @@ function parseNumber(number) {
     }
   }
 }
+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;
@@ -91301,6 +91405,10 @@ const inputNumberProps = {
     type: Boolean,
     default: true
   },
+  type: {
+    type: String,
+    default: "default"
+  },
   parse: Function,
   format: Function,
   precision: Number,
@@ -91350,10 +91458,6 @@ var _UInputNumber = defineComponent({
       uncontrolledValueRef
     );
     const displayedValueRef = 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) => {
@@ -91389,6 +91493,39 @@ var _UInputNumber = defineComponent({
         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,
@@ -91399,7 +91536,7 @@ var _UInputNumber = defineComponent({
       if (isInputing && isWipValue(displayedValue)) {
         return false;
       }
-      const parsedValue = (props.parse || parse)(displayedValue);
+      const parsedValue = effectiveParse(displayedValue);
       if (parsedValue === null) {
         if (doUpdateIfValid)
           doUpdateValue(null);
@@ -91441,43 +91578,70 @@ var _UInputNumber = defineComponent({
     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 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 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,
@@ -91729,15 +91893,30 @@ var _UInputNumber = defineComponent({
         }
       }
     }
+    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);
       }
     }
     watch(mergedValueRef, () => {
@@ -91770,6 +91949,7 @@ var _UInputNumber = defineComponent({
       displayedValue: displayedValueRef,
       addable: addableRef,
       minusable: minusableRef,
+      showButton: showButtonRef,
       mergedStatus: mergedStatusRef,
       handleFocus,
       handleBlur,
@@ -95243,7 +95423,8 @@ const mappingCardListProps = {
   gap: {
     type: Number,
     default: 16
-  }
+  },
+  emptyProps: Object
 };
 
 var MappingCardBody = defineComponent({
@@ -96008,9 +96189,16 @@ var style$o = c$1([cB("mapping-card", `
     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 = defineComponent({
   name: "MappingCard",
@@ -96101,8 +96289,18 @@ var _UMappingCardList = defineComponent({
     };
   },
   render() {
-    const { mergedClsPrefix, mergedPagination, gap, items } = this;
-    return /* @__PURE__ */ h("div", { class: `${mergedClsPrefix}-mapping-card-list` }, /* @__PURE__ */ h(
+    const {
+      mergedClsPrefix,
+      mergedPagination,
+      gap,
+      items,
+      emptyProps,
+      $slots
+    } = this;
+    const isEmpty = !items.length;
+    return /* @__PURE__ */ h("div", { class: `${mergedClsPrefix}-mapping-card-list` }, isEmpty ? /* @__PURE__ */ h("div", { class: `${mergedClsPrefix}-mapping-card-list__empty` }, resolveSlot($slots.empty, () => [
+      /* @__PURE__ */ h(UEmpty$1, { size: "large", ...emptyProps })
+    ])) : /* @__PURE__ */ h(
       _UFlex,
       {
         vertical: true,
@@ -112394,7 +112592,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.0";
+var version = "2.0.2";
 
 function create({
   componentPrefix = "U",