@aotearoan/neon/dist/components/user-input/number/NeonNumber.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as g, useAttrs as S, ref as B, computed as a } from "vue";
import { NeonFunctionalColor as F } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonSize as x } from "../../../common/enums/NeonSize.es.js";
import { NeonInputMode as p } from "../../../common/enums/NeonInputMode.es.js";
import M from "../button/NeonButton.vue.es.js";
import w from "../field-group/NeonFieldGroup.vue.es.js";
import h from "../input/NeonInput.vue.es.js";
import { NeonNumberUtils as s } from "../../../common/utils/NeonNumberUtils.es.js";
const U = g({
  name: "NeonNumber",
  components: {
    NeonButton: M,
    NeonFieldGroup: w,
    NeonInput: h
  },
  props: {
    /**
     * The value of the number input. Either a valid number or null.
     */
    modelValue: { type: Number, default: null },
    /**
     * The minimum value the input can accept.
     */
    min: { type: Number, required: !1 },
    /**
     * The maximum value the input can accept.
     */
    max: { type: Number, required: !1 },
    /**
     * The step value for the spin buttons.
     */
    step: { type: Number, required: !1 },
    /**
     * The component color.
     */
    color: { type: String, default: F.LowContrast },
    /**
     * The component size.
     */
    size: { type: String, default: x.Medium },
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: { type: String, default: null },
    /**
     * Placeholder text to display in the input
     */
    placeholder: { type: String, default: null },
    /**
     * Whether the component is disabled.
     */
    disabled: { type: Boolean, default: !1 },
    /**
     * Enable/disable direct editing of the value.
     */
    editable: { type: Boolean, default: !0 },
    /**
     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
     */
    spinButtons: { type: Boolean, default: !1 },
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.
     */
    percentage: { type: Boolean, default: !1 },
    /**
     * The rounding precision for display formatting.
     */
    decimals: { type: Number, required: !1 },
    /**
     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in
     * the template string. e.g. value = 90, ${value} => $90.
     */
    valueTemplate: { type: String, required: !1 },
    /**
     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
     */
    inputmode: { type: String, default: p.Numeric },
    /**
     * ARIA label for the increment spinner button.
     */
    incrementLabel: { type: String, default: "Increment" },
    /**
     * ARIA label for the decrement spinner button.
     */
    decrementLabel: { type: String, default: "Decrement" }
  },
  emits: [
    /**
     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering
     * the value.
     * @type {number | null} the current value or null if the value has been cleared.
     */
    "update:modelValue"
  ],
  setup(e, { emit: f }) {
    const v = S(), o = B(!1), r = (t) => {
      e.disabled || f("update:modelValue", t);
    }, N = a(() => {
      const { onBlur: t, onFocus: l, ...m } = v;
      return m;
    }), V = (t) => {
      const l = s.parseNumber(t), m = t !== "" && t !== null ? Math.max(Math.min(l, e.max ?? Number.MAX_SAFE_INTEGER), e.min ?? Number.MIN_SAFE_INTEGER) : null;
      (m === null || !isNaN(l)) && r(m);
    }, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), i = a(() => {
      const t = e.modelValue !== null ? +e.modelValue : e.min || 0;
      return n.value !== void 0 ? Number(t.toFixed(n.value)) : t;
    }), b = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? s.formatNumber(
      e.modelValue,
      {
        decimals: u.value,
        format: e.valueTemplate,
        percentage: e.percentage
      },
      e.locale
    ) : e.modelValue), c = a(() => {
      var t;
      return n.value ? (t = e.modelValue) == null ? void 0 : t.toFixed(n.value) : e.modelValue;
    }), y = a(() => o.value ? c.value ? `${c.value}` : "" : b.value), d = a(() => e.step ?? (e.percentage ? 0.01 : 1));
    return {
      focus: o,
      sanitizedAttributes: N,
      computedDecimals: u,
      computedRawDecimals: n,
      computedValue: i,
      computedStep: d,
      displayValue: y,
      valueChanged: V,
      increment: () => {
        const t = i.value + d.value, l = e.max !== void 0 ? Math.min(e.max, t) : t;
        l !== e.modelValue && r(l);
      },
      decrement: () => {
        const t = i.value - d.value, l = e.min !== void 0 ? Math.max(e.min, t) : t;
        l !== e.modelValue && r(l);
      },
      onFocus: () => o.value = !0,
      onBlur: () => o.value = !1
    };
  }
});
export {
  U as default
};
//# sourceMappingURL=NeonNumber.es.js.map