@vue-interface/input-field
Version:
A Vue input field component.
174 lines (173 loc) • 6.16 kB
JavaScript
import { openBlock as l, createElementBlock as c, createElementVNode as i, defineComponent as P, ref as R, useModel as j, computed as F, useTemplateRef as f, normalizeClass as x, unref as o, renderSlot as a, toDisplayString as b, createCommentVNode as m, normalizeProps as v, guardReactiveProps as y, withDirectives as G, mergeProps as U, vModelDynamic as q, withModifiers as H, createVNode as I, createBlock as C, Transition as J, withCtx as w, createTextVNode as K, mergeModels as A } from "vue";
import { ActivityIndicator as L } from "@vue-interface/activity-indicator";
import { useFormControl as O, FormControlErrors as Q, FormControlFeedback as W } from "@vue-interface/form-control";
function X(e, B) {
return l(), c("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
"aria-hidden": "true",
"data-slot": "icon"
}, [
i("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M6 18 18 6M6 6l12 12"
})
]);
}
const Y = ["for"], Z = { class: "form-control-inner" }, _ = { class: "form-control-activity-indicator" }, ee = {
invalid: "",
class: "invalid-feedback"
}, te = {
valid: "",
class: "valid-feedback"
}, ae = /* @__PURE__ */ P({
inheritAttrs: !1,
__name: "InputField",
props: /* @__PURE__ */ A({
activity: { type: Boolean },
disabled: { type: Boolean },
error: {},
errors: {},
feedback: {},
formControlClass: { default: "form-control" },
helpText: {},
id: {},
indicator: {},
indicatorSize: {},
invalid: { type: Boolean },
label: {},
labelClass: { default: "form-label" },
modelValue: {},
name: {},
plaintext: { type: Boolean },
size: { default: "form-control-md" },
color: {},
readonly: { type: Boolean },
valid: { type: Boolean },
value: {},
clearable: { type: Boolean, default: !1 }
}, {
modelValue: {},
modelModifiers: {}
}),
emits: /* @__PURE__ */ A(["blur", "focus", "focusin", "focusout", "click", "doubleclick", "contextmenu", "mousedown", "mouseup", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousemove", "keydown", "keyup", "keypress", "select", "selectionchange", "invalid", "submit", "reset", "scroll", "wheel", "copy", "cut", "paste", "touchstart", "touchend", "touchmove", "touchcancel", "change", "input", "beforeinput"], ["update:modelValue"]),
setup(e, { expose: B, emit: N }) {
const r = e, S = R(), d = j(e, "modelValue"), D = N, {
controlAttributes: k,
formGroupClasses: E,
listeners: $
} = O({ model: d, props: r, emit: D }), p = F(() => !r.disabled && !r.readonly), h = F(() => r.clearable && (!!S.value || !!d.value) && p.value);
function g() {
p.value && (d.value = void 0);
}
const V = f("activity"), z = f("help"), T = f("label"), u = f("field"), M = f("wrapper");
return B({
activity: V,
help: z,
field: u,
label: T,
wrapper: M,
focus: () => u.value?.focus(),
blur: () => u.value?.blur()
}), (t, n) => (l(), c("div", {
ref_key: "wrapper",
ref: M,
class: x(["input-field", [o(E), { "has-clear-button": h.value }]])
}, [
a(t.$slots, "label", {}, () => [
r.label ? (l(), c("label", {
key: 0,
ref_key: "label",
ref: T,
class: x(e.labelClass),
for: o(k).id
}, b(r.label), 11, Y)) : m("", !0)
]),
i("div", Z, [
a(t.$slots, "control", v(y({ controlAttributes: o(k), listeners: o($) })), () => [
t.$slots.icon ? (l(), c("div", {
key: 0,
class: "form-control-inner-icon",
onClick: n[0] || (n[0] = (s) => u.value?.focus())
}, [
a(t.$slots, "icon")
])) : m("", !0),
G(i("input", U({
ref_key: "field",
ref: u,
"onUpdate:modelValue": n[1] || (n[1] = (s) => d.value = s)
}, { ...o(k), ...o($) }), null, 16), [
[q, d.value]
])
]),
i("div", _, [
a(t.$slots, "activity", v(y({ canClear: h.value, clear: g, isInteractive: p.value })), () => [
h.value ? (l(), c("button", {
key: 0,
type: "button",
class: "input-field-close-button",
onClick: H(g, ["stop"])
}, [
I(o(X), { class: "size-[1.25em]" })
])) : (l(), C(J, {
key: 1,
name: "input-field-fade"
}, {
default: w(() => [
r.activity && e.indicator ? (l(), C(o(L), {
key: "activity",
ref_key: "activity",
ref: V,
type: e.indicator,
size: e.indicatorSize
}, null, 8, ["type", "size"])) : m("", !0)
]),
_: 1
}))
])
])
]),
a(t.$slots, "errors", v(y({ error: e.error, errors: e.errors, id: t.$attrs.id, name: t.$attrs.name })), () => [
e.error || e.errors ? (l(), C(o(Q), {
key: 0,
id: e.id,
name: e.name,
error: e.error,
errors: e.errors
}, {
default: w(({ error: s }) => [
i("div", ee, [
K(b(s), 1),
n[2] || (n[2] = i("br", null, null, -1))
])
]),
_: 1
}, 8, ["id", "name", "error", "errors"])) : m("", !0)
]),
a(t.$slots, "feedback", v(y({ feedback: e.feedback })), () => [
I(o(W), { feedback: e.feedback }, {
default: w(({ feedback: s }) => [
i("div", te, b(s), 1)
]),
_: 1
}, 8, ["feedback"])
]),
a(t.$slots, "help", v(y({ helpText: e.helpText })), () => [
e.helpText ? (l(), c("small", {
key: 0,
ref_key: "help",
ref: z,
class: "form-help"
}, b(e.helpText), 513)) : m("", !0)
])
], 2));
}
});
export {
ae as InputField
};
//# sourceMappingURL=input-field.js.map