dk-plus
Version:
275 lines (274 loc) • 9.22 kB
JavaScript
import { defineComponent as p, ref as V, reactive as ee, computed as o, provide as te, nextTick as ne, watch as D, onBeforeUnmount as le, toRefs as re } from "vue";
import { dkSelectProps as ue, SELECT_PROPS_TOKEN as ie } from "./index3.js";
const ce = p({
name: "DkSelect",
props: ue,
emits: {
"update:modelValue": (t) => !0,
change: (t) => !0,
clear: () => !0,
"visible-change": (t) => !0,
focus: (t) => !0,
blur: (t) => !0,
"remove-tag": (t) => !0,
"popup-scroll": (t) => !0
},
setup(t, { emit: d, slots: P }) {
const h = V(null), L = V(null), K = V(null), u = ee({
query: "",
open: !1,
hoverIndex: -1,
hovering: !1,
dropdownStyle: {},
debounceTimer: 0,
selectedLabelMap: {}
}), k = (e) => {
if (e == null)
return "";
if (typeof e == "object") {
const n = t.valueKey || "value", l = e[n];
return l == null ? "" : String(l);
}
return String(e);
}, O = o(() => {
const e = t.props || {};
return {
value: e.value || "value",
label: e.label || "label",
disabled: e.disabled || "disabled"
};
}), f = (e, n) => {
if (e === n)
return !0;
if (e == null || n == null)
return !1;
if (typeof e == "object" && typeof n == "object") {
const l = t.valueKey || "value";
return e[l] === n[l];
}
return !1;
}, x = o(() => {
const e = t.options || [], n = O.value;
return e.map((l) => {
var A;
const r = l[n.value], i = r != null ? r : l, c = l[n.label], m = String((A = c != null ? c : i) != null ? A : ""), S = !!l[n.disabled];
return { label: m, value: i, disabled: S };
});
}), a = o(() => {
const e = x.value, n = t.modelValue;
return (t.multiple ? Array.isArray(n) ? n : [] : [n]).map((r) => {
const i = e.find((S) => f(S.value, r));
if (i)
return { value: i.value, label: i.label };
const c = k(r), m = c ? u.selectedLabelMap[c] : void 0;
return m != null && m !== "" ? { value: r, label: m } : typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? { value: r, label: String(r) } : null;
}).filter(Boolean);
}), C = o(() => {
var e, n;
return t.multiple ? "" : (n = (e = a.value[0]) == null ? void 0 : e.label) != null ? n : "";
}), M = o(() => {
var e;
return t.multiple ? a.value.length > 0 : a.value.length > 0 && ((e = a.value[0]) == null ? void 0 : e.label) !== "";
}), z = o(() => !!t.clearable && !t.disabled && M.value && (u.hovering || u.open)), B = o({
get: () => t.multiple ? t.filterable && u.open ? u.query : "" : t.filterable && u.open ? u.query : C.value,
set: (e) => {
!t.filterable || (u.query = e, t.disabled || b(!0), t.remote && typeof t.remoteMethod == "function" && (u.debounceTimer && window.clearTimeout(u.debounceTimer), u.debounceTimer = window.setTimeout(() => {
var n;
(n = t.remoteMethod) == null || n.call(t, u.query);
}, t.debounce || 300)));
}
}), v = o(() => {
const e = x.value;
if (!t.filterable)
return e;
const n = u.query.trim();
if (!n || t.remote)
return e;
if (typeof t.filterMethod == "function")
try {
return t.filterMethod(n) ? e : [];
} catch {
return e;
}
const l = n.toLowerCase();
return e.filter((r) => String(r.label).toLowerCase().includes(l));
}), R = o(() => t.loading ? t.loadingText || "Loading" : t.filterable && u.query.trim() && v.value.length === 0 ? t.noMatchText || t.emptyText : x.value.length === 0 ? t.noDataText || t.emptyText : v.value.length === 0 ? t.emptyText : ""), _ = o(() => {
if (!t.multiple)
return [];
if (!t.collapseTags)
return a.value;
const e = Math.max(0, t.maxCollapseTags || 1);
return a.value.slice(0, e);
}), j = o(() => {
if (!t.multiple || !t.collapseTags)
return 0;
const e = Math.max(0, t.maxCollapseTags || 1);
return Math.max(0, a.value.length - e);
}), H = o(() => t.multiple && a.value.length ? "" : t.placeholder), $ = o(() => !!P.default), U = (e) => {
if (t.multiple) {
const n = t.modelValue;
return Array.isArray(n) ? n.some((l) => f(l, e)) : !1;
}
return f(t.modelValue, e);
};
te(ie, {
setValue: (e, n, l, r) => {
var i;
(i = l == null ? void 0 : l.stopPropagation) == null || i.call(l), T({ value: e, label: String(n != null ? n : ""), disabled: !!r });
},
isSelected: (e) => U(e)
});
const E = () => {
var r;
const e = v.value;
if (!e.length) {
u.hoverIndex = -1;
return;
}
const n = (r = a.value[0]) == null ? void 0 : r.value, l = e.findIndex((i) => i.value === n && !i.disabled);
u.hoverIndex = l >= 0 ? l : e.findIndex((i) => !i.disabled);
}, b = (e) => {
u.open = e, d("visible-change", e), e ? ne(() => {
s(), E(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
}) : (window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), t.multiple || (u.query = ""), u.hoverIndex = -1);
}, s = () => {
const e = L.value;
if (!e)
return;
const n = e.getBoundingClientRect(), l = n.bottom + (t.offset || 0), r = n.left;
u.dropdownStyle = {
position: "fixed",
top: `${l}px`,
left: `${r}px`,
minWidth: t.width || `${n.width}px`,
zIndex: "3000"
};
}, y = () => {
t.disabled || b(!0);
}, I = () => {
b(!1);
}, w = () => {
var e, n, l, r;
(n = (e = h.value) == null ? void 0 : e.handelClose) == null || n.call(e), (r = (l = h.value) == null ? void 0 : l.close) == null || r.call(l), b(!1);
}, F = (e) => {
b(e);
}, g = (e) => {
d("update:modelValue", e), d("change", e);
}, T = (e) => {
var l;
if (t.disabled || e.disabled)
return;
const n = k(e.value);
if (n && (u.selectedLabelMap[n] = String((l = e.label) != null ? l : "")), t.multiple) {
const r = Array.isArray(t.modelValue) ? [...t.modelValue] : [], i = r.findIndex((m) => f(m, e.value));
if (i >= 0) {
r.splice(i, 1), g(r);
return;
}
const c = t.multipleLimit || 0;
if (c > 0 && r.length >= c)
return;
r.push(e.value), g(r);
return;
}
g(e.value), u.query = "", w();
}, N = () => {
t.disabled || (t.multiple ? g([]) : g(""), u.query = "", u.selectedLabelMap = {}, d("clear"), w());
}, W = (e) => {
if (t.disabled || !t.multiple)
return;
const n = Array.isArray(t.modelValue) ? [...t.modelValue] : [], l = n.findIndex((r) => f(r, e));
l >= 0 && n.splice(l, 1), g(n), d("remove-tag", e);
};
D(
() => t.disabled,
(e) => {
e && w();
}
), D(
() => t.modelValue,
() => {
u.open && E();
}
);
const G = (e) => {
if (t.multiple) {
const n = t.modelValue;
return Array.isArray(n) ? n.some((l) => f(l, e.value)) : !1;
}
return f(t.modelValue, e.value);
}, q = (e) => {
const n = v.value;
if (!n.length)
return;
let l = u.hoverIndex;
l < 0 && (l = 0);
for (let r = 0; r < n.length; r += 1)
if (l = (l + e + n.length) % n.length, !n[l].disabled) {
u.hoverIndex = l;
return;
}
}, J = () => {
const e = v.value, n = u.hoverIndex;
n < 0 || n >= e.length || T(e[n]);
}, Q = (e) => {
if (!t.disabled) {
if (e.key === "Escape") {
I();
return;
}
if (e.key === "ArrowDown") {
e.preventDefault(), u.open || y(), q(1);
return;
}
if (e.key === "ArrowUp") {
e.preventDefault(), u.open || y(), q(-1);
return;
}
if (e.key === "Enter") {
if (!u.open) {
y();
return;
}
e.preventDefault(), J();
}
}
}, X = (e) => d("focus", e), Y = (e) => d("blur", e), Z = (e) => {
d("popup-scroll", e);
};
return le(() => {
window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), u.debounceTimer && window.clearTimeout(u.debounceTimer);
}), {
...re(u),
triggerCompRef: h,
triggerElRef: L,
dropdownRef: K,
selectedList: a,
collapsedTags: _,
collapsedMoreCount: j,
multiplePlaceholder: H,
displayText: C,
hasValue: M,
showClear: z,
inputText: B,
filteredOptions: v,
emptyDisplayText: R,
hasDefaultSlot: $,
isSelected: G,
onOpen: y,
onClose: I,
onTriggerChange: F,
onPick: T,
onClear: N,
onRemoveTag: W,
onKeydown: Q,
onFocus: X,
onBlur: Y,
refreshDropdownPosition: s,
onPopupScroll: Z
};
}
});
export {
ce as default
};