@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
383 lines (382 loc) • 10.9 kB
JavaScript
import { DESCRIPTION_SIZE_TYPES as e, VALIDATION_MESSAGE_TYPES as t } from "../../common/constants/index.js";
import { addClassStyleAttrs as n, getUniqueString as r, getValidationState as i, hasSlotContent as a, removeClassStyleAttrs as o } from "../../common/utils/index.js";
import { MessagesMixin as s } from "../../common/mixins/input.js";
import { t as c } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import l from "../validation-messages/validation-messages.js";
import { DESCRIPTION_SIZE_CLASSES as u, INPUT_ICON_SIZES as d, INPUT_SIZES as f, INPUT_SIZE_CLASSES as p, INPUT_STATE_CLASSES as m, INPUT_TYPES as h, LABEL_SIZE_CLASSES as g } from "./input-constants.js";
import { createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, mergeProps as S, normalizeClass as C, openBlock as w, renderSlot as T, resolveComponent as E, toDisplayString as D, toHandlers as O } from "vue";
//#region components/input/input.vue
var k = {
compatConfig: { MODE: 3 },
name: "DtInput",
components: { DtValidationMessages: l },
mixins: [s],
inheritAttrs: !1,
props: {
name: {
type: String,
default: ""
},
type: {
type: String,
default: h.TEXT,
validator: (e) => Object.values(h).includes(e)
},
modelValue: {
type: [String, Number],
default: ""
},
disabled: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
labelVisible: {
type: Boolean,
default: !0
},
description: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => Object.values(f).includes(e)
},
inputClass: {
type: [
String,
Object,
Array
],
default: ""
},
inputWrapperClass: {
type: [
String,
Object,
Array
],
default: ""
},
rootClass: {
type: [
String,
Object,
Array
],
default: ""
},
currentLength: {
type: Number,
default: null
},
retainWarning: {
type: Boolean,
default: !1
},
validate: {
type: Object,
default: null
},
hidden: {
type: Boolean,
default: !1
}
},
emits: [
"input",
"blur",
"clear",
"focus",
"focusin",
"focusout",
"update:modelValue",
"update:length",
"update:invalid"
],
data() {
return {
isInputFocused: !1,
isInvalid: !1,
defaultLength: 0,
hasSlotContent: a,
isComposing: !1,
justEndedComposition: !1
};
},
computed: {
isTextarea() {
return this.type === h.TEXTAREA;
},
isDefaultSize() {
return this.size === f.DEFAULT;
},
iconSize() {
return d[this.size];
},
isValidSize() {
return Object.values(f).includes(this.size);
},
isValidDescriptionSize() {
return Object.values(e).includes(this.size);
},
inputComponent() {
return this.isTextarea ? "textarea" : "input";
},
inputListeners() {
return {
compositionstart: () => {
this.isComposing = !0;
},
compositionend: () => {
this.isComposing = !1, this.justEndedComposition = !0;
let e = this.$refs.input.value;
this.$emit("input", e), this.$emit("update:modelValue", e), Promise.resolve().then(() => {
this.justEndedComposition = !1;
});
},
input: async (e) => {
if (this.isComposing || this.justEndedComposition) return;
let t = e.target.value;
this.type === h.FILE && (t = Array.from(e.target.files).map((e) => e.name)), this.$emit("input", t), this.$emit("update:modelValue", t);
},
blur: (e) => {
this.isInputFocused = !1, this.onBlur(e);
},
focus: (e) => {
this.isInputFocused = !0, this.$emit("focus", e);
},
focusin: (e) => this.$emit("focusin", e),
focusout: (e) => this.$emit("focusout", e)
};
},
descriptionKey() {
return `input-description-${r()}`;
},
inputState() {
return i(this.validationMessages);
},
defaultLengthCalculation() {
return this.calculateLength(this.modelValue);
},
validationProps() {
return { length: {
description: this?.validate?.length?.description,
max: this?.validate?.length?.max,
warn: this?.validate?.length?.warn,
message: this?.validate?.length?.message,
limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : !1
} };
},
validationMessages() {
return this.showLengthLimitValidation ? this.formattedMessages.concat([this.inputLengthErrorMessage()]) : this.formattedMessages;
},
showInputState() {
return this.showMessages && this.inputState;
},
inputLength() {
return this.currentLength ? this.currentLength : this.defaultLengthCalculation;
},
inputLengthState() {
return this.inputLength < this.validationProps.length.warn ? null : this.inputLength <= this.validationProps.length.max ? this.validationProps.length.warn ? t.WARNING : null : t.ERROR;
},
shouldValidateLength() {
return !!(this.validationProps.length.description && this.validationProps.length.max);
},
shouldLimitMaxLength() {
return this.shouldValidateLength && this.validationProps.length.limitMaxLength;
},
showLengthLimitValidation() {
return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.retainWarning || this.isInputFocused || this.isInvalid);
},
sizeModifierClass() {
return this.isDefaultSize || !this.isValidSize ? "" : p[this.inputComponent][this.size];
},
stateClass() {
return [m[this.inputState]];
}
},
watch: {
isInvalid(e) {
this.$emit("update:invalid", e);
},
modelValue: {
immediate: !0,
handler(e) {
this.shouldValidateLength && this.validateLength(this.inputLength), this.currentLength ?? this.$emit("update:length", this.calculateLength(e)), this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== e && (this.$refs.input.value = e);
}
}
},
beforeMount() {
this.descriptionSizeClasses = u, this.labelSizeClasses = g;
},
mounted() {
this.isTextarea && this.$refs.input && (this.$refs.input.value = this.modelValue);
},
methods: {
removeClassStyleAttrs: o,
addClassStyleAttrs: n,
inputClasses() {
return [
"d-input__input",
this.inputComponent === "input" ? "d-input" : "d-textarea",
{
[this.stateClass]: this.showInputState,
"d-input-icon--left": this.$slots.leftIcon,
"d-input-icon--right": this.$slots.rightIcon
},
this.sizeModifierClass,
this.inputClass
];
},
inputWrapperClasses() {
return this.hidden ? [] : [
"d-input__wrapper",
{ [this.stateClass]: this.showInputState },
this.inputWrapperClass
];
},
calculateLength(e) {
return typeof e == "string" ? [...e].length : 0;
},
inputLengthErrorMessage() {
return {
message: this.validationProps.length.message,
type: this.inputLengthState
};
},
onBlur(e) {
this.$refs.container?.contains(e.relatedTarget) || this.$emit("blur", e);
},
emitClearEvents() {
this.$emit("input", ""), this.$emit("clear"), this.$emit("update:modelValue", "");
},
blur() {
this.$refs.input.blur();
},
focus() {
this.$refs.input.focus();
},
select() {
this.$refs.input.select();
},
getMessageKey(e, t) {
return `message-${e}-${t}`;
},
validateLength(e) {
this.isInvalid = e > this.validationProps.length.max;
},
clearInput() {
this.$refs.input.value = "", this.$refs.input.focus(), this.emitClearEvents();
}
}
}, A = ["aria-details"], j = ["id"], M = { key: 0 }, N = {
key: 1,
"data-qa": "dt-input-length-description",
class: "d-input__length-description"
}, P = ["read-only"], F = [
"name",
"disabled",
"autocomplete",
"maxlength"
], I = [
"value",
"name",
"type",
"disabled",
"autocomplete",
"maxlength"
];
function L(e, t, n, r, i, a) {
let o = E("dt-validation-messages");
return w(), v("div", S({
ref: "container",
class: [
n.rootClass,
"d-input__root",
{ "d-input--hidden": n.hidden }
]
}, a.addClassStyleAttrs(e.$attrs), { "data-qa": "dt-input" }), [y("label", {
class: "d-input__label",
"aria-details": e.$slots.description || n.description ? a.descriptionKey : void 0,
"data-qa": "dt-input-label-wrapper"
}, [
T(e.$slots, "labelSlot", {}, () => [n.labelVisible && n.label ? (w(), v("div", {
key: 0,
ref: "label",
"data-qa": "dt-input-label",
class: C([
"d-input__label-text",
"d-label",
e.labelSizeClasses[n.size]
])
}, D(n.label), 3)) : _("", !0)]),
i.hasSlotContent(e.$slots.description) || n.description || a.shouldValidateLength ? (w(), v("div", {
key: 0,
id: a.descriptionKey,
ref: "description",
class: C([
"d-input__description",
"d-description",
e.descriptionSizeClasses[n.size]
]),
"data-qa": "dt-input-description"
}, [i.hasSlotContent(e.$slots.description) || n.description ? (w(), v("div", M, [T(e.$slots, "description", {}, () => [b(D(n.description), 1)])])) : _("", !0), a.shouldValidateLength ? (w(), v("div", N, D(a.validationProps.length.description), 1)) : _("", !0)], 10, j)) : _("", !0),
y("div", {
class: C(a.inputWrapperClasses()),
"read-only": n.disabled === !0 ? !0 : void 0
}, [
y("span", {
class: "d-input-icon d-input-icon--left",
"data-qa": "dt-input-left-icon-wrapper",
onFocusout: t[0] || (t[0] = (...e) => a.onBlur && a.onBlur(...e))
}, [T(e.$slots, "leftIcon", { iconSize: a.iconSize })], 32),
a.isTextarea ? (w(), v("textarea", S({
key: 0,
ref: "input",
name: n.name,
disabled: n.disabled,
autocomplete: e.$attrs.autocomplete ?? "off",
class: a.inputClasses(),
maxlength: a.shouldLimitMaxLength ? a.validationProps.length.max : null,
"data-qa": "dt-input-input"
}, a.removeClassStyleAttrs(e.$attrs), O(a.inputListeners, !0)), null, 16, F)) : (w(), v("input", S({
key: 1,
ref: "input",
value: n.modelValue,
name: n.name,
type: n.type,
disabled: n.disabled,
autocomplete: e.$attrs.autocomplete ?? "off",
class: a.inputClasses(),
maxlength: a.shouldLimitMaxLength ? a.validationProps.length.max : null,
"data-qa": "dt-input-input"
}, a.removeClassStyleAttrs(e.$attrs), O(a.inputListeners, !0)), null, 16, I)),
y("span", {
class: "d-input-icon d-input-icon--right",
"data-qa": "dt-input-right-icon-wrapper",
onFocusout: t[1] || (t[1] = (...e) => a.onBlur && a.onBlur(...e))
}, [T(e.$slots, "rightIcon", {
iconSize: a.iconSize,
clear: a.clearInput
})], 32)
], 10, P)
], 8, A), x(o, S({
"validation-messages": a.validationMessages,
"show-messages": e.showMessages,
class: e.messagesClass
}, e.messagesChildProps, { "data-qa": "dt-input-messages" }), null, 16, [
"validation-messages",
"show-messages",
"class"
])], 16);
}
var R = /* @__PURE__ */ c(k, [["render", L]]);
//#endregion
export { R as default };
//# sourceMappingURL=input.js.map