@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
415 lines (414 loc) • 14 kB
JavaScript
import { defineComponent as ke, ref as S, useSlots as ye, toRef as Se, computed as $, watch as A, watchEffect as xe, onMounted as Ee, nextTick as B, openBlock as we, createBlock as $e, unref as a, normalizeClass as Q, createSlots as Ve, withCtx as d, renderSlot as m, createVNode as p, createElementVNode as Ie, withModifiers as Fe } from "vue";
import "../icon/index.mjs";
import "../select/index.mjs";
import "../form/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as Pe, useProps as Ae, createSizeProp as De, createStateProp as Ne, createIconProp as O, useLocale as ze, emitEvent as c } from "@vexip-ui/config";
import { placementWhileList as Te, useSetTimeout as Le } from "@vexip-ui/hooks";
import { isNull as R, toNumber as Be, debounce as Oe, throttle as Re } from "@vexip-ui/utils";
import { autoCompleteProps as Me } from "./props.mjs";
import { useFieldStore as He } from "../form/helper.mjs";
import Ke from "../select/select.vue2.mjs";
import g from "../renderer/renderer.mjs";
import X from "../icon/icon.mjs";
const Ue = ["autofocus", "spellcheck", "disabled", "placeholder", "readonly", "name"], tl = /* @__PURE__ */ ke({
name: "AutoComplete",
__name: "auto-complete",
props: Me,
emits: ["update:value"],
setup(Y, { expose: Z, emit: _ }) {
const r = S(), i = S(), {
idFor: M,
labelId: ee,
state: le,
disabled: ae,
loading: oe,
size: te,
validateField: ne,
clearField: re,
getFieldValue: ie,
setFieldValue: ue
} = He(() => {
var e;
return (e = i.value) == null ? void 0 : e.focus();
}), x = Pe("auto-complete"), l = Ae("autoComplete", Y, {
size: De(te),
state: Ne(le),
locale: null,
transfer: !1,
value: {
default: () => ie(),
static: !0
},
options: {
default: () => [],
static: !0
},
filter: !1,
prefix: O(),
prefixColor: "",
suffix: O(),
suffixColor: "",
placeholder: null,
disabled: () => ae.value,
transitionName: () => x.ns("drop"),
dropDisabled: !1,
placement: {
default: "bottom",
validator: (e) => Te.includes(e)
},
clearable: !1,
ignoreCase: !1,
autofocus: !1,
spellcheck: !1,
keyConfig: () => ({}),
loading: () => oe.value,
loadingIcon: O(),
loadingLock: !1,
loadingEffect: null,
transparent: !1,
debounce: !1,
delay: null,
showEmpty: !1,
name: {
default: "",
static: !0
},
popperAlive: null,
slots: () => ({})
}), se = _, H = ye(), fe = ze("input", Se(l, "locale")), { timer: de } = Le(), n = S(l.value), f = S(-1), u = S(!1), h = S(!1);
let E = !1, b = l.value, V = String(b);
const I = $(() => l.loading && l.loadingLock), K = $(() => {
var e;
return ((e = r.value) == null ? void 0 : e.optionStates) || [];
}), F = $(() => {
var e;
return ((e = r.value) == null ? void 0 : e.visibleOptions) || [];
}), pe = $(() => !!(H.prefix || l.prefix || l.slots.prefix)), U = $(() => !!(H.suffix || l.suffix || l.slots.suffix));
A(
() => l.value,
(e) => {
n.value = e, b = e, V = String(e), i.value && (i.value.value = String(e));
}
), A(f, ce), A(u, (e) => {
var o;
e ? (o = i.value) == null || o.focus() : f.value = -1;
}), A(n, (e) => {
l.filter && r.value && (r.value.currentFilter = `${e}`);
}), xe(() => {
!l.filter || !u.value || !r.value || (r.value.currentFilter = String(n.value));
}), Z({
idFor: M,
composing: h,
select: r,
control: i,
focus: (e) => {
var o;
return (o = i.value) == null ? void 0 : o.focus(e);
},
blur: () => {
var e;
return (e = i.value) == null ? void 0 : e.blur();
}
}), Ee(() => {
B(() => {
i.value && !R(n.value) && (i.value.value = String(n.value));
});
});
function ce() {
const e = f.value;
let o = -1;
K.value.forEach((t) => {
t.hidden ? t.hitting = !1 : (o += 1, t.hitting = e === o, t.hitting && i.value && (i.value.value = String(t.value)));
}), i.value && e < 0 && (i.value.value = V);
}
let w = !1;
function ve(e) {
w || (w = !0, c(l.onFocus, e));
}
function me(e) {
w && (w = !1, de.focus = setTimeout(() => {
w || (c(l.onBlur, e), C());
}, 120));
}
function W(e, o) {
if (h.value || R(e))
return;
const t = n.value;
n.value = e, c(l.onSelect, e, o), e !== t ? (E = !0, C()) : u.value = !1;
}
function j(e) {
var t;
const o = typeof e == "string" ? e : e.target.value;
n.value = o, E = !0, V = o, f.value !== -1 && (f.value = 0), l.showEmpty && (u.value = !l.dropDisabled, r.value && (r.value.currentVisible = u.value)), c(l.onInput, o), B(N), (t = r.value) == null || t.updatePopper();
}
const q = Be(l.delay), P = l.debounce ? Oe(j, q || 100) : Re(j, q || 16);
function C(e = !0) {
if (!E || n.value === b) return;
E = !1, b = n.value, V = String(b);
const o = K.value.find((t) => t.value === b);
r.value && (r.value.currentValues.length = 0, (n.value || n.value === 0) && r.value.currentValues.push(n.value)), se("update:value", n.value), ue(n.value), c(l.onChange, n.value, (o == null ? void 0 : o.data) || null), e && ne(), u.value = !1, i.value && (i.value.value = String(b));
}
let k = !1, D = !1;
function ge() {
l.disabled || I.value || (k = u.value, D = !0, r.value && (r.value.currentFilter = String(n.value)));
}
function he() {
l.disabled || I.value || (D = !1, r.value && (u.value = !0, k ? r.value.currentVisible = !0 : (N(), k = u.value, k && c(l.onToggle, k))));
}
function be(e) {
l.disabled || I.value || D || (u.value = e, e && N(), k = u.value, u.value !== e && c(l.onToggle, u.value), u.value || (f.value = -1));
}
function N() {
u.value = !(l.dropDisabled || !l.showEmpty && !F.value.length), r.value && (r.value.currentVisible = u.value);
}
function Ce(e) {
if (h.value) {
e.stopPropagation();
return;
}
const o = e.code || e.key;
if (o === "Enter" || o === "NumpadEnter")
z(e);
else if (o === "ArrowDown" || o === "ArrowUp") {
e.preventDefault(), e.stopPropagation();
const t = F.value, s = t.length;
if (!s) return;
const v = o === "ArrowDown" ? 1 : -1;
let y = (Math.max(f.value + v, -1) + s) % s, L = t[y];
for (let J = 0; (L.disabled || L.group) && J < s; ++J)
y += v, y = (y + s) % s, L = t[y];
f.value = y;
} else
["Space", " "].includes(o) && e.stopPropagation(), ["Enter", "ArrowLeft", "ArrowRight"].includes(o) || (f.value = -1);
}
function z(e) {
if (e.stopPropagation(), !h.value) {
if (f.value >= 0 && F.value.length) {
const o = F.value[f.value === -1 ? 0 : f.value];
W(o.value, o.data);
} else
C();
c(l.onEnter, n.value), u.value = !1;
}
}
function T() {
var e;
if (l.clearable) {
const o = n.value;
n.value = "", u.value = !1, !R(o) && o !== n.value && (E = !0), C(!1), c(l.onClear), B(re), (e = i.value) == null || e.focus();
}
}
function G() {
h.value && (h.value = !1, i.value && i.value.dispatchEvent(new Event("input")));
}
return (e, o) => (we(), $e(a(Ke), {
id: a(M),
ref_key: "select",
ref: r,
visible: u.value,
"onUpdate:visible": o[5] || (o[5] = (t) => u.value = t),
class: Q([a(x).b(), a(l).inherit && a(x).bm("inherit")]),
inherit: a(l).inherit,
"label-id": a(ee),
"list-class": a(x).be("list"),
value: n.value,
size: a(l).size,
state: a(l).state,
clearable: a(l).clearable,
"transition-name": a(l).transitionName,
disabled: a(l).disabled,
transfer: a(l).transfer,
placement: a(l).placement,
"prefix-color": a(l).prefixColor,
"suffix-color": a(l).suffixColor,
"no-suffix": !U.value,
placeholder: a(l).placeholder,
options: a(l).options,
"key-config": a(l).keyConfig,
loading: a(l).loading,
"loading-icon": a(l).loadingIcon,
"loading-lock": a(l).loadingLock,
"loading-effect": a(l).loadingEffect,
transparent: e.transparent,
filter: a(l).filter,
"ignore-case": a(l).ignoreCase,
"popper-alive": a(l).popperAlive,
onToggle: be,
onSelect: W,
onClear: T,
onFocus: o[6] || (o[6] = (t) => {
var s;
return (s = i.value) == null ? void 0 : s.focus();
}),
onOutsideClose: C,
onClick: he,
onClickCapture: ge
}, Ve({
control: d(() => [
m(e.$slots, "control", {
value: n.value,
onInput: a(P),
onChange: C,
onEnter: z,
onClear: T
}, () => [
p(a(g), {
renderer: a(l).slots.control,
data: {
value: n.value,
onInput: a(P),
onChange: C,
onEnter: z,
onClear: T
}
}, {
default: d(() => [
Ie("input", {
ref_key: "control",
ref: i,
class: Q(a(x).be("input")),
autofocus: a(l).autofocus,
spellcheck: a(l).spellcheck,
disabled: a(l).disabled,
placeholder: a(l).placeholder ?? a(fe).placeholder,
readonly: I.value,
name: a(l).name,
autocomplete: "off",
tabindex: "-1",
role: "combobox",
"aria-autocomplete": "list",
onSubmit: o[0] || (o[0] = Fe(() => {
}, ["prevent"])),
onInput: o[1] || (o[1] = //@ts-ignore
(...t) => a(P) && a(P)(...t)),
onKeydown: Ce,
onFocus: o[2] || (o[2] = (t) => ve(t)),
onBlur: o[3] || (o[3] = (t) => me(t)),
onCompositionstart: o[4] || (o[4] = (t) => h.value = !0),
onCompositionend: G,
onChange: G
}, null, 42, Ue)
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
_: 2
}, [
pe.value ? {
name: "prefix",
fn: d(() => [
m(e.$slots, "prefix", {}, () => [
p(a(g), {
renderer: a(l).slots.prefix
}, {
default: d(() => [
p(a(X), {
icon: a(l).prefix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
]),
key: "0"
} : void 0,
U.value ? {
name: "suffix",
fn: d(() => [
m(e.$slots, "suffix", {}, () => [
p(a(g), {
renderer: a(l).slots.suffix
}, {
default: d(() => [
p(a(X), {
icon: a(l).suffix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
]),
key: "1"
} : void 0,
e.$slots.default || a(l).slots.default ? {
name: "default",
fn: d(({ option: t, index: s, selected: v }) => [
m(e.$slots, "default", {
option: t,
index: s,
selected: v
}, () => [
p(a(g), {
renderer: a(l).slots.default,
data: { option: t, index: s, selected: v }
}, null, 8, ["renderer", "data"])
])
]),
key: "2"
} : void 0,
e.$slots.group || a(l).slots.group ? {
name: "group",
fn: d(({ option: t, index: s }) => [
m(e.$slots, "group", {
option: t,
index: s
}, () => [
p(a(g), {
renderer: a(l).slots.group,
data: { option: t, index: s }
}, null, 8, ["renderer", "data"])
])
]),
key: "3"
} : void 0,
e.$slots.prepend || a(l).slots.prepend ? {
name: "prepend",
fn: d(() => [
m(e.$slots, "prepend", {}, () => [
p(a(g), {
renderer: a(l).slots.prepend
}, null, 8, ["renderer"])
])
]),
key: "4"
} : void 0,
e.$slots.append || a(l).slots.append ? {
name: "append",
fn: d(() => [
m(e.$slots, "append", {}, () => [
p(a(g), {
renderer: a(l).slots.append
}, null, 8, ["renderer"])
])
]),
key: "5"
} : void 0,
e.$slots.list || a(l).slots.list ? {
name: "list",
fn: d(({ options: t, isSelected: s, handleSelect: v }) => [
m(e.$slots, "list", {
options: t,
isSelected: s,
handleSelect: v
}, () => [
p(a(g), {
renderer: a(l).slots.list,
data: {
options: t,
isSelected: s,
handleSelect: v
}
}, null, 8, ["renderer", "data"])
])
]),
key: "6"
} : void 0
]), 1032, ["id", "visible", "class", "inherit", "label-id", "list-class", "value", "size", "state", "clearable", "transition-name", "disabled", "transfer", "placement", "prefix-color", "suffix-color", "no-suffix", "placeholder", "options", "key-config", "loading", "loading-icon", "loading-lock", "loading-effect", "transparent", "filter", "ignore-case", "popper-alive"]));
}
});
export {
tl as default
};
//# sourceMappingURL=auto-complete.vue2.mjs.map