@evance/evance-ui 1.0.35 → 1.0.37

package/dist/esm/chunks/EvNumberField.vue_vue_type_script_setup_true_lang-C_rqM4L1.mjs

@@ -0,0 +1,691 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+/*! Evance UI v1.0.37 | MIT License */
+import { watch, defineComponent, useSlots, ref, computed, shallowRef, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withKeys, nextTick } from "vue";
+import { m as makeEvTextfieldProps, _ as _sfc_main$1 } from "./EvTextfield.vue_vue_type_script_setup_true_lang-JO4q1wMN.mjs";
+import { p as propsFactory } from "./props-C5O_XLol.mjs";
+import { o as omit, f as filterComponentProps } from "./helpers-BObZTKcX.mjs";
+import { d as isEmpty } from "./is-functions-cWaLib1L.mjs";
+import { u as useModelProxy } from "./modelProxy-DgW6Hnv7.mjs";
+import { _ as _sfc_main$2 } from "./EvButton.vue_vue_type_script_setup_true_lang-ByO69fI4.mjs";
+import { M as MinusIcon, P as PlusIcon } from "./PlusIcon-D66wKDVI.mjs";
+import { b as useLocaleManager } from "./locale-BIAWh1oC.mjs";
+function mathEval(expression) {
+  const ops = {
+    "+": { precedence: 1, associativity: "left", fn: (a, b) => a + b },
+    "-": { precedence: 1, associativity: "left", fn: (a, b) => a - b },
+    "*": { precedence: 2, associativity: "left", fn: (a, b) => a * b },
+    "/": { precedence: 2, associativity: "left", fn: (a, b) => a / b }
+  };
+  const output = [];
+  const operators = [];
+  const tokens = [];
+  const regex = /\d+(\.\d+)?|[()+\-*/]/g;
+  let match;
+  while (match = regex.exec(expression.replace(/\s+/g, ""))) {
+    tokens.push(match[0]);
+  }
+  if (!tokens.length) {
+    return null;
+  }
+  let prevToken;
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token === "-" && (i === 0 || prevToken && (prevToken in ops || prevToken === "("))) {
+      const next = tokens[i + 1];
+      if (next && /^\d+(\.\d+)?$/.test(next)) {
+        output.push(0);
+        output.push(Number(next));
+        output.push("-");
+        i++;
+        prevToken = next;
+        continue;
+      } else if (next === "(") {
+        output.push(0);
+        operators.push("-");
+        continue;
+      }
+    }
+    if (/^\d+(\.\d+)?$/.test(token)) {
+      output.push(Number(token));
+    } else if (token in ops) {
+      while (operators.length && operators[operators.length - 1] in ops && (ops[token].associativity === "left" && ops[token].precedence <= ops[operators[operators.length - 1]].precedence || ops[token].associativity === "right" && ops[token].precedence < ops[operators[operators.length - 1]].precedence)) {
+        output.push(operators.pop());
+      }
+      operators.push(token);
+    } else if (token === "(") {
+      operators.push(token);
+    } else if (token === ")") {
+      while (operators.length && operators[operators.length - 1] !== "(") {
+        output.push(operators.pop());
+      }
+      if (operators[operators.length - 1] === "(") {
+        operators.pop();
+      } else {
+        return null;
+      }
+    } else {
+      return null;
+    }
+    prevToken = token;
+  }
+  while (operators.length) {
+    const op = operators.pop();
+    if (op === "(" || op === ")") {
+      return null;
+    }
+    output.push(op);
+  }
+  const stack = [];
+  for (const token of output) {
+    if (typeof token === "number") {
+      stack.push(token);
+    } else if (token in ops) {
+      const b = stack.pop();
+      const a = stack.pop();
+      if (a === void 0 || b === void 0) return null;
+      stack.push(ops[token].fn(a, b));
+    }
+  }
+  return stack.length === 1 ? stack[0] : null;
+}
+const makeEvNumberFieldProps = propsFactory(
+  {
+    minFractionDigits: Number,
+    maxFractionDigits: Number,
+    currency: String,
+    currencyDisplay: {
+      type: String,
+      default: "narrowSymbol"
+    },
+    locale: String,
+    localeMatcher: String,
+    min: {
+      type: Number,
+      default: void 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      default: "decimal"
+    },
+    showButtons: Boolean,
+    step: {
+      type: Number,
+      default: 1
+    },
+    useGrouping: Boolean,
+    ...omit(makeEvTextfieldProps(), ["type"])
+  },
+  "EvNumberField"
+);
+class NumberParser {
+  constructor(localeManager, props) {
+    __publicField(this, "_currencyPattern");
+    __publicField(this, "_decimalPattern");
+    __publicField(this, "_groupPattern");
+    __publicField(this, "_minusSignPattern");
+    __publicField(this, "_numberFormat");
+    __publicField(this, "_numerals");
+    __publicField(this, "_numeralsIndex");
+    __publicField(this, "_numeralPattern");
+    __publicField(this, "_prefixPattern");
+    __publicField(this, "_suffixPattern");
+    this.localeManager = localeManager;
+    this.props = props;
+    this.cachePatterns();
+    this.watchProps();
+  }
+  cachePatterns() {
+    this._numberFormat = new Intl.NumberFormat(this.locale, this.options);
+    this._numerals = this.createNumerals();
+    this._numeralsIndex = this.createNumeralsIndex();
+    this._numeralPattern = this.createNumeralPattern();
+    this._groupPattern = this.createGroupPattern();
+    this._minusSignPattern = this.createMinusSignPattern();
+    this._currencyPattern = this.createCurrencyPattern();
+    this._decimalPattern = this.createDecimalPattern();
+    this._suffixPattern = this.createSuffixPattern();
+    this._prefixPattern = this.createPrefixPattern();
+  }
+  get currencyPattern() {
+    return this._currencyPattern;
+  }
+  get decimalPattern() {
+    return this._decimalPattern;
+  }
+  get groupChar() {
+    const formatter = new Intl.NumberFormat(this.locale, {
+      useGrouping: true
+    });
+    return formatter.format(1e6).trim().replace(this.numeralPattern, "").charAt(0);
+  }
+  get groupPattern() {
+    return this._groupPattern;
+  }
+  get locale() {
+    return this.props.locale ?? this.localeManager.currentLocale.value;
+  }
+  get minusSignPattern() {
+    return this._minusSignPattern;
+  }
+  get numberFormat() {
+    return this._numberFormat;
+  }
+  get numerals() {
+    return this._numerals;
+  }
+  get numeralsIndex() {
+    return this._numeralsIndex;
+  }
+  get numeralPattern() {
+    return this._numeralPattern;
+  }
+  get options() {
+    return {
+      localeMatcher: "best fit",
+      style: this.props.mode,
+      currency: this.props.currency,
+      currencyDisplay: this.props.currencyDisplay,
+      useGrouping: this.props.useGrouping,
+      minimumFractionDigits: this.props.minFractionDigits,
+      maximumFractionDigits: this.props.maxFractionDigits
+    };
+  }
+  get prefixChar() {
+    const options = {
+      style: this.props.mode,
+      currency: this.props.currency,
+      currencyDisplay: this.props.currencyDisplay
+    };
+    const formatter = new Intl.NumberFormat(this.locale, options);
+    return formatter.format(1).split("1")[0];
+  }
+  get prefixPattern() {
+    return this._prefixPattern;
+  }
+  get suffixChar() {
+    const options = {
+      style: this.props.mode,
+      currency: this.props.currency,
+      currencyDisplay: this.props.currencyDisplay,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    };
+    const formatter = new Intl.NumberFormat(this.locale, options);
+    return formatter.format(1).split("1")[1];
+  }
+  get suffixPattern() {
+    return this._suffixPattern;
+  }
+  /**
+   * ## Create Currency Pattern
+   * @private
+   */
+  createCurrencyPattern() {
+    if (!this.props.currency) {
+      return new RegExp(`[]`, "g");
+    }
+    const options = {
+      style: "currency",
+      currency: this.props.currency,
+      currencyDisplay: this.props.currencyDisplay,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    };
+    const formatter = new Intl.NumberFormat(this.locale, options);
+    return new RegExp(
+      `[${formatter.format(1).replace(/\s/g, "").replace(this.numeralPattern, "").replace(this.groupPattern, "")}]`,
+      "g"
+    );
+  }
+  /**
+   * ## Create Decimal Pattern
+   * @private
+   */
+  createDecimalPattern() {
+    const formatter = new Intl.NumberFormat(this.locale, {
+      ...this.options,
+      useGrouping: false
+    });
+    return new RegExp(
+      `[${formatter.format(1.1).replace(this.currencyPattern, "").trim().replace(this.numeralPattern, "")}]`,
+      "g"
+    );
+  }
+  /**
+   * ## Create Group Pattern
+   * @private
+   */
+  createGroupPattern() {
+    return new RegExp(`[${this.groupChar}]`, "g");
+  }
+  /**
+   * ## Create Minus Sign Pattern
+   * @private
+   */
+  createMinusSignPattern() {
+    const formatter = new Intl.NumberFormat(this.locale, {
+      useGrouping: false
+    });
+    return new RegExp(
+      `[${formatter.format(-1).trim().replace(this.numeralPattern, "")}]`,
+      "g"
+    );
+  }
+  /**
+   * ## Create Numerals
+   * @private
+   */
+  createNumerals() {
+    return [
+      ...new Intl.NumberFormat(this.locale, {
+        useGrouping: false
+      }).format(9876543210)
+    ].reverse();
+  }
+  /**
+   * ## Create Numerals Index
+   * @private
+   */
+  createNumeralsIndex() {
+    const index = new Map(this.numerals.map((d, i) => [d, i]));
+    return (d) => {
+      var _a;
+      return ((_a = index.get(d)) == null ? void 0 : _a.toString()) ?? "";
+    };
+  }
+  /**
+   * ## Create Numeral Pattern
+   * @private
+   */
+  createNumeralPattern() {
+    return new RegExp(`[${this.numerals.join("")}]`, "g");
+  }
+  /**
+   * ## Create Prefix Pattern
+   * @private
+   */
+  createPrefixPattern() {
+    return new RegExp(`${this.escapeRegExp(this.prefixChar || "")}`, "g");
+  }
+  /**
+   * ## Create Suffix Pattern
+   * @private
+   */
+  createSuffixPattern() {
+    return new RegExp(`${this.escapeRegExp(this.suffixChar || "")}`, "g");
+  }
+  /**
+   * ## Escape RegExp
+   * @param text
+   */
+  escapeRegExp(text) {
+    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+  }
+  /**
+   * ## Format Value
+   *
+   * Converts a number into formatted string.
+   *
+   * @param value
+   */
+  formatValue(value) {
+    if (isEmpty(value)) {
+      return "";
+    }
+    if (value === "-") {
+      return value;
+    }
+    const formatter = new Intl.NumberFormat(this.locale, this.options);
+    const formattedValue = formatter.format(value);
+    return formattedValue;
+  }
+  /**
+   * ## Parse Value
+   *
+   * Convert a text value into a number.
+   *
+   * Returns a string when an incomplete value is supplied,
+   * or a number when a valid number is parsed successfully
+   * from the text supplied, or a `null` value when the number
+   * is not valid (can't be parsed).
+   *
+   * @param text
+   */
+  parseValue(text) {
+    if (text === null || text === void 0) {
+      text = "";
+    }
+    const filteredText = text.replace(this.suffixPattern, "").replace(this.prefixPattern, "").trim().replace(this.currencyPattern, "").replace(this.groupPattern, "").replace(this.minusSignPattern, "-").replace(this.decimalPattern, ".").replace(this.numeralPattern, this.numeralsIndex);
+    if (!filteredText) {
+      return null;
+    }
+    if (filteredText === "-") {
+      return filteredText;
+    }
+    let parsedValue;
+    const pattern = /^[-+*/.\d\s()]+$/;
+    if (pattern.test(filteredText)) {
+      try {
+        parsedValue = mathEval(`(${filteredText})`);
+      } catch (error) {
+        parsedValue = +filteredText;
+      }
+    } else {
+      parsedValue = +filteredText;
+    }
+    return isNaN(parsedValue) ? null : parsedValue;
+  }
+  /**
+   * ## Watch Props
+   * @private
+   */
+  watchProps() {
+    watch(
+      [
+        this.localeManager.currentLocale,
+        () => this.props.locale,
+        () => this.props.localeMatcher,
+        () => this.props.mode,
+        () => this.props.currency,
+        () => this.props.currencyDisplay,
+        () => this.props.useGrouping,
+        () => this.props.minFractionDigits,
+        () => this.props.maxFractionDigits
+      ],
+      (value, oldValue) => {
+        if (value !== oldValue) {
+          this.cachePatterns();
+        }
+      }
+    );
+  }
+}
+const incrementRate = 100;
+const incrementDelay = 0.25;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvNumberField",
+  props: {
+    ...makeEvNumberFieldProps()
+  },
+  setup(__props) {
+    const props = __props;
+    const localeManager = useLocaleManager();
+    const slots = useSlots();
+    const evTextfieldRef = ref();
+    const evTextfieldProps = computed(() => {
+      return omit(filterComponentProps(_sfc_main$1, props), ["modelValue"]);
+    });
+    const numberParser = new NumberParser(localeManager, props);
+    const modelValue = useModelProxy(props, "modelValue");
+    const inputValue = shallowRef();
+    inputValue.value = numberParser.formatValue(modelValue.value);
+    watch(modelValue, () => {
+      inputValue.value = numberParser.formatValue(modelValue.value);
+    });
+    watch(
+      [
+        localeManager.currentLocale,
+        () => props.locale,
+        () => props.localeMatcher,
+        () => props.mode,
+        () => props.currency,
+        () => props.currencyDisplay,
+        () => props.useGrouping,
+        () => props.minFractionDigits,
+        () => props.maxFractionDigits
+      ],
+      (value, oldValue) => {
+        if (value !== oldValue) {
+          inputValue.value = numberParser.formatValue(modelValue.value);
+        }
+      }
+    );
+    const minimum = computed(() => {
+      return props.min ?? null;
+    });
+    const maximum = computed(() => {
+      return props.max ?? null;
+    });
+    const incrementAmount = computed(() => {
+      return props.step ?? 1;
+    });
+    let incrementInterval = null;
+    let isIncrementing = false;
+    function getDecimalPlaces(value) {
+      const options = {
+        useGrouping: false,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 20
+      };
+      const fraction = localeManager.numberFormatter.formatter(options).formatToParts(value).find((part) => part.type === "fraction");
+      return fraction ? fraction.value.length : 0;
+    }
+    function getValue(value) {
+      if (isEmpty(value)) {
+        return value ?? null;
+      }
+      if (typeof value === "string") {
+        value = parseFloat(value);
+      }
+      if (isMinBoundary(value)) {
+        value = minimum.value;
+      } else if (isMaxBoundary(value)) {
+        value = maximum.value;
+      }
+      const decimalPlaces = getDecimalPlaces(value);
+      if (!isEmpty(props.minFractionDigits) && decimalPlaces < props.minFractionDigits) {
+        value = parseFloat(value.toFixed(props.minFractionDigits));
+      }
+      if (!isEmpty(props.maxFractionDigits) && decimalPlaces > props.maxFractionDigits) {
+        value = parseFloat(value.toFixed(props.maxFractionDigits));
+      }
+      return value;
+    }
+    function isMaxBoundary(value) {
+      return maximum.value !== null && maximum.value < value;
+    }
+    function isMinBoundary(value) {
+      return minimum.value !== null && minimum.value > value;
+    }
+    function onBlur(e) {
+      if (inputValue.value === "-") {
+        inputValue.value = "";
+      }
+      const parsedValue = numberParser.parseValue(inputValue.value);
+      const currentValue = getValue(parsedValue);
+      inputValue.value = numberParser.formatValue(currentValue);
+      modelValue.value = numberParser.parseValue(inputValue.value);
+    }
+    function onFocus(e) {
+      if (props.readonly) {
+        return;
+      }
+      inputValue.value = isEmpty(modelValue.value) ? "" : modelValue.value.toString();
+    }
+    function onInputKeydown(e) {
+      const passThrough = [
+        "Backspace",
+        "Delete",
+        "Home",
+        "End",
+        "ArrowLeft",
+        "ArrowRight",
+        "Tab"
+      ];
+      if (passThrough.includes(e.key)) {
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        startIncrementing(1);
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        startIncrementing(-1);
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const parsedValue = numberParser.parseValue(inputValue.value);
+        const currentValue = getValue(parsedValue);
+        modelValue.value = currentValue;
+        nextTick(() => {
+          inputValue.value = isEmpty(currentValue) ? "" : currentValue.toString();
+        });
+        return;
+      }
+      const isPaste = e.key === "v" && e.ctrlKey;
+      const whitelist = new RegExp("[0-9 +-/()*]");
+      if (!whitelist.test(e.key) && !isPaste) {
+        e.preventDefault();
+      }
+    }
+    function onInputKeyup(e) {
+      if (e.code === "ArrowUp" || e.code === "ArrowDown") {
+        e.preventDefault();
+      }
+      stopIncrementing();
+    }
+    function onPaste(e) {
+      var _a;
+      e.preventDefault();
+      const data = (_a = e.clipboardData) == null ? void 0 : _a.getData("Text");
+      if (data) {
+        const parsedValue = numberParser.parseValue(data);
+        const currentValue = getValue(parsedValue);
+        inputValue.value = isEmpty(currentValue) ? "" : currentValue.toString();
+        modelValue.value = currentValue;
+      }
+    }
+    function startIncrementing(direction) {
+      if (isIncrementing || props.readonly) {
+        return;
+      }
+      isIncrementing = true;
+      let currentValue;
+      if (isEmpty(modelValue.value)) {
+        currentValue = minimum.value ?? 0;
+      } else {
+        currentValue = getValue(
+          modelValue.value + direction * incrementAmount.value
+        );
+      }
+      inputValue.value = numberParser.formatValue(currentValue);
+      const startTime = Date.now();
+      let internalIncrementAmount = incrementAmount.value;
+      incrementInterval = setInterval(() => {
+        const currentTime = Date.now();
+        const elapsedTime = (currentTime - startTime) / 1e3;
+        if (elapsedTime < incrementDelay) {
+          return;
+        }
+        const multiplier = Math.floor(Math.pow(2, elapsedTime - 1));
+        internalIncrementAmount = incrementAmount.value * multiplier;
+        currentValue = getValue(
+          currentValue + direction * internalIncrementAmount
+        );
+        inputValue.value = numberParser.formatValue(currentValue);
+      }, incrementRate);
+    }
+    function stopIncrementing() {
+      if (isIncrementing) {
+        clearInterval(incrementInterval);
+        const parsedValue = numberParser.parseValue(inputValue.value);
+        modelValue.value = getValue(parsedValue);
+        isIncrementing = false;
+      }
+    }
+    const hasPrefix = computed(() => {
+      return props.showButtons || slots.prefix || props.prefix;
+    });
+    const hasSuffix = computed(() => {
+      return props.showButtons || slots.suffix || props.suffix;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+        ref_key: "evTextfieldRef",
+        ref: evTextfieldRef
+      }, evTextfieldProps.value, {
+        modelValue: inputValue.value,
+        "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => inputValue.value = $event),
+        class: "ev-number-field",
+        type: "text",
+        onPaste,
+        onBlur,
+        onFocus,
+        onKeydown: onInputKeydown,
+        onKeyup: onInputKeyup
+      }), createSlots({ _: 2 }, [
+        props.label || unref(slots).label ? {
+          name: "label",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "label", {}, () => [
+              createTextVNode(toDisplayString(props.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        hasPrefix.value ? {
+          name: "prefix",
+          fn: withCtx(() => [
+            props.showButtons ? (openBlock(), createBlock(unref(_sfc_main$2), {
+              key: 0,
+              rounded: "",
+              size: "x-small",
+              class: "ev-number-field--minus",
+              variant: "subtle",
+              icon: unref(MinusIcon),
+              disabled: props.readonly || props.disabled,
+              onKeydown: _cache[0] || (_cache[0] = withKeys(($event) => startIncrementing(-1), ["space", "enter"])),
+              onKeyup: _cache[1] || (_cache[1] = ($event) => stopIncrementing()),
+              onMousedown: _cache[2] || (_cache[2] = ($event) => startIncrementing(-1)),
+              onMouseup: _cache[3] || (_cache[3] = ($event) => stopIncrementing()),
+              onMouseleave: _cache[4] || (_cache[4] = ($event) => stopIncrementing())
+            }, null, 8, ["icon", "disabled"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "prefix", {}, () => [
+              createTextVNode(toDisplayString(props.prefix), 1)
+            ])
+          ]),
+          key: "1"
+        } : void 0,
+        hasSuffix.value ? {
+          name: "suffix",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "suffix", {}, () => [
+              createTextVNode(toDisplayString(props.suffix), 1)
+            ]),
+            props.showButtons ? (openBlock(), createBlock(unref(_sfc_main$2), {
+              key: 0,
+              rounded: "",
+              size: "x-small",
+              class: "ev-number-field--plus",
+              variant: "subtle",
+              icon: unref(PlusIcon),
+              disabled: props.readonly || props.disabled,
+              onKeydown: _cache[5] || (_cache[5] = withKeys(($event) => startIncrementing(1), ["space", "enter"])),
+              onKeyup: _cache[6] || (_cache[6] = ($event) => stopIncrementing()),
+              onMousedown: _cache[7] || (_cache[7] = ($event) => startIncrementing(1)),
+              onMouseup: _cache[8] || (_cache[8] = ($event) => stopIncrementing()),
+              onMouseleave: _cache[9] || (_cache[9] = ($event) => stopIncrementing())
+            }, null, 8, ["icon", "disabled"])) : createCommentVNode("", true)
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["modelValue"]);
+    };
+  }
+});
+export {
+  NumberParser as N,
+  _sfc_main as _,
+  mathEval as a,
+  makeEvNumberFieldProps as m
+};
+//# sourceMappingURL=EvNumberField.vue_vue_type_script_setup_true_lang-C_rqM4L1.mjs.map