@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
166 lines (165 loc) • 5.89 kB
JavaScript
import { defineComponent as W, useAttrs as X, computed as c, ref as v, watch as D, openBlock as i, createBlock as s, normalizeStyle as G, unref as r, normalizeClass as a, withCtx as J, createElementVNode as w, renderSlot as S, createCommentVNode as m, mergeProps as K, toHandlers as M } from "vue";
import { useTheme as Q } from "../../composables/useTheme.js";
import { useColors as U } from "../../composables/useColors.js";
import { useCommon as k } from "../../composables/useCommon.js";
import { useInputtable as f } from "../../composables/useInputtable.js";
import { useInteractive as z } from "../../composables/useInteractive.js";
import { closeIcon as Y, eyeIcon as Z, eyeVisibleIcon as x } from "../../common/icons.js";
import _ from "../label/Label.vue.js";
import p from "../icon/Icon.vue.js";
import ee from "../inputFooter/InputFooter.vue.js";
const re = { class: "relative" }, oe = ["id", "disabled", "min", "max", "minlength", "maxlength", "step", "dir", "name", "placeholder", "readonly", "type", "value"], ne = {
...k.props(),
...U.props("primary"),
...z.props(),
...f.props(),
showPasswordToggle: {
type: Boolean,
default: !0
},
dir: {
type: String,
default: "ltr"
},
icon: String,
iconLeft: String,
iconRight: String,
max: [Number, String],
maxlength: [Number, String],
min: [Number, String],
minlength: [Number, String],
placeholder: String,
type: {
type: String,
default: "text"
},
step: [Number, String],
block: Boolean,
showCounter: Boolean,
clearable: Boolean
}, te = {
name: "XInput",
validators: {
...k.validators()
}
}, ge = /* @__PURE__ */ W({
...te,
props: ne,
emits: f.emits(),
setup(C, { expose: I, emit: N }) {
const o = C, V = N, g = X(), $ = c(() => Object.keys(g).reduce((e, n) => (n.startsWith("data-") && (e[n] = g[n]), e), {})), h = v(null), l = v(o.type);
D(() => o.type, (e) => {
l.value = e;
});
function B(e) {
if (!e.target)
return;
const n = e.target;
if (o.type === "number") {
const u = Number(n.value);
typeof o.min < "u" && u < Number(o.min) && (n.value = o.min.toString()), typeof o.max < "u" && u > Number(o.max) && (n.value = o.max.toString());
}
}
function L() {
l.value = l.value === "password" ? "text" : "password";
}
const R = c(() => o.clearable && o.modelValue !== ""), { focus: b, blur: P } = z(h), {
errorInternal: d,
hideFooterInternal: T,
isInsideForm: q,
inputListeners: A,
reset: y,
validate: E,
setError: F
} = f(o, { focus: b, emit: V }), j = c(() => {
const e = o.modelValue;
return e ? String(e).length : 0;
}), { styles: H, classes: t, className: O } = Q("Input", {}, o, { errorInternal: d });
return I({ focus: b, blur: P, reset: y, validate: E, setError: F }), (e, n) => (i(), s(_, {
style: G(r(H)),
block: e.block,
disabled: e.disabled,
required: e.required,
"is-inside-form": r(q),
label: e.label,
class: a([
r(O),
r(t).wrapper
]),
tooltip: e.tooltip
}, {
default: J(() => [
w("div", re, [
S(e.$slots, "prefix", {}, () => [
e.iconLeft || e.icon ? (i(), s(p, {
key: 0,
size: e.size,
icon: e.iconLeft || e.icon,
class: a(["ml-2 left-1", r(t).icon])
}, null, 8, ["size", "icon", "class"])) : m("", !0)
]),
w("input", K({
id: e.id,
ref_key: "elRef",
ref: h,
class: [
r(t).input,
e.type === "password" ? "pr-10" : "",
// error
r(d) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-input-border)]",
{
"!pl-10": e.iconLeft || e.icon,
"!pr-10": e.iconRight
}
],
disabled: e.disabled,
min: e.min,
max: e.max,
minlength: e.minlength,
maxlength: e.maxlength,
step: e.step,
dir: e.dir,
name: e.name,
placeholder: e.placeholder,
readonly: e.readonly,
type: l.value,
value: typeof e.modelValue < "u" ? e.modelValue : ""
}, $.value, M(r(A), !0), { onChange: B }), null, 16, oe),
S(e.$slots, "suffix", {}, () => [
R.value ? (i(), s(p, {
key: 0,
size: e.size,
icon: r(Y),
class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
onClick: n[0] || (n[0] = (u) => r(y)())
}, null, 8, ["size", "icon", "class"])) : m("", !0),
e.iconRight ? (i(), s(p, {
key: 1,
size: e.size,
icon: e.iconRight,
class: a(["mr-2 right-1", r(t).icon])
}, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (i(), s(p, {
key: 2,
size: e.size,
icon: l.value === "password" ? r(Z) : r(x),
class: a(["mr-2 right-1 cursor-pointer", r(t).icon]),
onClick: n[1] || (n[1] = (u) => L())
}, null, 8, ["size", "icon", "class"])) : m("", !0)
])
]),
r(T) ? m("", !0) : (i(), s(ee, {
key: 0,
error: r(d),
helper: e.helper,
"character-count": j.value,
"max-characters": e.maxlength,
"show-counter": e.showCounter
}, null, 8, ["error", "helper", "character-count", "max-characters", "show-counter"]))
]),
_: 3
}, 8, ["style", "block", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
}
});
export {
ge as default
};