@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
204 lines (203 loc) • 6.51 kB
JavaScript
import { defineComponent as C, useAttrs as z, ref as m, computed as l } from "vue";
import { NeonInputType as u } from "../../../common/enums/NeonInputType.es.js";
import { NeonState as n } from "../../../common/enums/NeonState.es.js";
import { NeonSize as D } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
import E from "../../presentation/icon/NeonIcon.vue.es.js";
import { NeonDebounceUtils as F } from "../../../common/utils/NeonDebounceUtils.es.js";
import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
const K = C({
name: "NeonInput",
components: {
NeonIcon: E
},
props: {
/**
* The id the input
*/
id: { type: String, default: null },
/**
* The value of the input
*/
modelValue: { type: String, default: null },
/**
* The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:
* * file (use <a href="/user-input/file">NeonFile</a>)
* * password (use <a href="/user-input/password">NeonPassword</a>)
*/
type: { type: String, default: u.Text },
/**
* Placeholder text to display in the input
*/
placeholder: { type: String, default: null },
/**
* Size of the input
*/
size: { type: String, default: D.Medium },
/**
* Color of the input
*/
color: { type: String, default: c.LowContrast },
/**
* The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
*/
inputmode: { type: String, default: L.Text },
/**
* The state of the input
*/
state: { type: String, default: n.Ready },
/**
* The number of rows to display in the case of a textarea
*/
rows: { type: Number, default: null },
/**
* The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of
* NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).
*/
icon: { type: String, default: null },
/**
* Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.
*/
iconReadonly: { type: Boolean, default: !1 },
/**
* Hide the icon button, e.g. the X button to clear the input's contents.
*/
hideIcon: { type: Boolean, default: !1 },
/**
* Tabindex to assign to the input.
*/
tabindex: { type: Number, default: 0 },
/**
* The disabled state of the input
*/
disabled: { type: Boolean, default: !1 },
/**
* When the state is success or error, display the field with the state color indicator, e.g. border or background
* color.
*/
stateHighlight: { type: Boolean, default: !0 },
/**
* When the state is success or error, display the state icon.
*/
stateIcon: { type: Boolean, default: !0 },
/**
* The character limit for a textarea.
*/
maxlength: { type: Number, default: null },
/**
* Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).
* Set to 0 to disable debounce.
*/
debounce: { type: Number, default: void 0 }
},
emits: [
/**
* Emitted when the input has gained focus
* @type {void}
*/
"focus",
/**
* Emitted when the input has lost focus
* @type {void}
*/
"blur",
/**
* Emitted when the icon is clicked
* @type {void}
*/
"icon-click",
/**
* Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit
* @type {string} the contents of the input
*/
"update:modelValue"
],
setup(e, { emit: o }) {
const g = z(), i = m(null), r = m(!1), y = l(() => {
const {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onBlur: t,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onFocus: a,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onIconClick: d,
...B
} = g;
return B;
}), s = F.debounce((t) => {
o("update:modelValue", t);
}, e.debounce), f = l(() => {
switch (e.state) {
case n.Loading:
return "loading";
case n.Success:
return e.stateIcon ? "check" : void 0;
case n.Error:
return e.stateIcon ? "times" : void 0;
default:
return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
}
}), h = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
switch (e.state) {
case n.Success:
return c.Success;
case n.Error:
return c.Error;
case n.Loading:
return e.color;
default:
return c.LowContrast;
}
}), S = () => {
var t;
(t = i.value) == null || t.focus();
}, N = () => {
var t;
(t = i.value) == null || t.click();
}, V = () => {
r.value = !0, o("focus");
}, v = () => {
r.value = !1, o("blur");
}, I = (t) => {
e.disabled || (e.icon ? o("icon-click") : s(""), t.preventDefault(), t.stopPropagation());
}, k = (t) => {
const a = t.target.value, d = e.maxlength && a.length > e.maxlength ? a.substring(0, e.maxlength) : a;
e.modelValue !== d && s(d);
}, w = (t) => {
t.key !== "Backspace" && e.maxlength && e.modelValue && e.modelValue.length >= e.maxlength && t.preventDefault();
}, x = l(() => {
if (e.placeholder)
return e.placeholder;
switch (e.type) {
case u.Email:
return "gbelson@hooli.com";
case u.Tel:
return "+41785551234";
case u.Url:
return "http://www.getskeleton.com";
default:
return "";
}
});
return {
neonInput: i,
focused: r,
sanitizedAttributes: y,
iconVisible: h,
iconName: f,
iconColor: b,
computedPlaceholder: x,
focus: S,
click: N,
onFocus: V,
onBlur: v,
iconClicked: I,
changeValue: k,
onKeyDown: w
};
}
});
export {
K as default
};
//# sourceMappingURL=NeonInput.es.js.map