@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
146 lines (145 loc) • 5.25 kB
JavaScript
import { defineComponent as g, useAttrs as S, ref as B, computed as a } from "vue";
import { NeonFunctionalColor as F } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonSize as x } from "../../../model/common/size/NeonSize.es.js";
import { NeonInputMode as M } from "../../../model/user-input/input/NeonInputMode.es.js";
import h from "../button/NeonButton.vue.es.js";
import w from "../field-group/NeonFieldGroup.vue.es.js";
import E from "../input/NeonInput.vue.es.js";
import { NeonNumberUtils as f } from "../../../utils/common/number/NeonNumberUtils.es.js";
const $ = g({
name: "NeonNumber",
components: {
NeonButton: h,
NeonFieldGroup: w,
NeonInput: E
},
props: {
/**
* The id the input
*/
id: { type: String, default: null },
/**
* 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.Primary },
/**
* 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: M.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: s }) {
const v = S(), o = B(!1), i = (t) => {
e.disabled || s("update:modelValue", t);
}, N = a(() => {
const { onBlur: t, onFocus: l, ...m } = v;
return m;
}), V = (t) => {
const l = f.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)) && i(m);
}, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), d = a(() => {
const t = e.modelValue !== null ? +e.modelValue : e.min ?? 0;
return n.value !== void 0 ? Number(t.toFixed(n.value)) : t;
}), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? f.formatNumber(
e.modelValue,
{
decimals: u.value,
format: e.valueTemplate,
percentage: e.percentage
},
e.locale
) : e.modelValue), c = a(() => n.value !== void 0 && e.modelValue !== null ? e.modelValue.toFixed(n.value) : e.modelValue === null ? "" : `${e.modelValue}`), b = a(() => o.value ? c.value !== void 0 ? `${c.value}` : "" : y.value), r = a(() => e.step ?? (e.percentage ? 0.01 : 1));
return {
focus: o,
sanitizedAttributes: N,
computedDecimals: u,
computedRawDecimals: n,
computedValue: d,
computedStep: r,
displayValue: b,
valueChanged: V,
increment: () => {
const t = d.value + r.value, l = e.max !== void 0 ? Math.min(e.max, t) : t;
l !== e.modelValue && i(l);
},
decrement: () => {
const t = d.value - r.value, l = e.min !== void 0 ? Math.max(e.min, t) : t;
l !== e.modelValue && i(l);
},
onFocus: () => o.value = !0,
onBlur: () => o.value = !1
};
}
});
export {
$ as default
};
//# sourceMappingURL=NeonNumber.es.js.map