@aplus-frontend/ui
Version:
240 lines (239 loc) • 6.94 kB
JavaScript
import { defineComponent as M, ref as g, onMounted as D, watch as R, computed as p, unref as a, createElementBlock as z, createBlock as E, openBlock as S, toDisplayString as U, mergeProps as K, createSlots as H, renderList as $, withCtx as B, renderSlot as j, normalizeProps as W, guardReactiveProps as Y, createVNode as G } from "vue";
import { debounce as J, isFunction as C, isArray as Q, isNil as X, omit as Z } from "lodash-unified";
import { Select as ee, Spin as te } from "@aplus-frontend/antdv";
import "../../hooks/index.mjs";
import { useDefaultPlaceholder as oe } from "../hooks/use-default-placeholder.mjs";
import { useSelectOptions as le, SELECT_ALL_VALUE_KEY as f } from "./use-select-options.mjs";
import { useControllableValue as ae } from "../../hooks/useControllableValue.mjs";
const ne = { key: 0 }, fe = /* @__PURE__ */ M({
name: "ApFieldSelect",
__name: "index",
props: {
mode: { default: "edit" },
class: {},
style: {},
defaultValue: {},
notFoundContent: {},
suffixIcon: {},
itemIcon: {},
size: {},
bordered: { type: Boolean, default: void 0 },
showArrow: { type: Boolean, default: void 0 },
variant: {},
maxCount: {},
transitionName: {},
choiceTransitionName: {},
popupClassName: {},
dropdownClassName: {},
placement: {},
status: {},
children: {},
listHeight: {},
onMouseenter: {},
onMouseleave: {},
tabindex: {},
onClick: {},
onFocus: {},
onBlur: {},
onChange: {},
onKeydown: {},
onKeyup: {},
onMousedown: {},
onSelect: {},
open: { type: Boolean, default: void 0 },
animation: {},
direction: {},
disabled: { type: Boolean, default: void 0 },
prefixCls: {},
id: {},
autofocus: { type: Boolean, default: void 0 },
getPopupContainer: {},
virtual: { type: Boolean, default: void 0 },
dropdownMatchSelectWidth: {},
placeholder: {},
loading: { type: Boolean, default: void 0 },
prefix: {},
clearIcon: {},
allowClear: { type: Boolean, default: !0 },
fieldNames: {},
inputValue: {},
searchValue: {},
autoClearSearchValue: { type: Boolean, default: void 0 },
onDeselect: {},
filterOption: {},
filterSort: {},
optionFilterProp: {},
optionLabelProp: {},
options: {},
defaultActiveFirstOption: { type: Boolean, default: void 0 },
listItemHeight: {},
onClickOption: {},
menuItemSelectedIcon: {},
labelInValue: { type: Boolean, default: void 0 },
showSearch: { type: Boolean, default: void 0 },
tagRender: {},
optionLabelRender: {},
onClear: {},
defaultOpen: { type: Boolean, default: void 0 },
onDropdownVisibleChange: {},
maxTagTextLength: {},
maxTagCount: {},
maxTagPlaceholder: {},
tokenSeparators: {},
removeIcon: {},
dropdownStyle: {},
dropdownRender: {},
dropdownAlign: {},
showAction: {},
onPopupScroll: {},
onInputKeyDown: {},
emptyText: { default: "--" },
request: {},
multiple: { type: Boolean, default: void 0 },
value: {},
"onUpdate:value": {},
searchMode: { default: "filter" },
refetchOnFocus: { type: Boolean, default: !1 },
lazy: { type: Boolean, default: !1 },
addAll: { type: [Boolean, Number] },
params: {},
searchDelay: { default: 300 }
},
emits: ["update:value"],
setup(w, { expose: F, emit: b }) {
let r = 0;
const t = w, N = J((e) => {
if (!C(t.request))
return;
r += 1;
const l = r;
s([]), n.value = !0, t.request(e).then((o) => {
r === l && (s(o), n.value = !1);
});
}, t.searchDelay), O = (e, l) => {
const o = t.fieldNames?.label || "label";
return typeof l?.[o] == "string" && l[o].toLowerCase().indexOf(e.toLowerCase()) > -1;
}, { options: u, updateOptions: s } = le(t), m = g(), n = g(t?.loading || !1), x = b;
async function d(e = !0) {
if (!C(t.request))
return;
n.value = !0, r += 1;
const l = r;
try {
e && s([]);
const o = await t.request(void 0, t.params);
if (l !== r)
return;
s(o);
} finally {
n.value = !1;
}
}
function I(e) {
t.onFocus?.(e), t.refetchOnFocus && r > 0 && !n.value && d(!0);
}
D(() => {
t.lazy || d();
}), R(
() => t.params,
() => {
d();
},
{
deep: !0
}
);
const { value: c, updateValue: v } = ae(t, x), V = oe("Select", t), A = p(() => {
const e = a(c);
if (!e)
return t.emptyText;
const l = t.fieldNames?.label || "label", o = t.fieldNames?.value || "value";
return Q(e) ? e.map(
(i) => a(u).find((q) => q[o] === i)?.[l]
).filter(Boolean).join("、") || t.emptyText : a(u).find(
(i) => i[o] === e
)?.[l] || t.emptyText;
}), _ = p(() => {
const e = !!t?.showSearch, l = t.searchMode;
let o = {};
return e && (o = l === "request" ? {
defaultActiveFirstOption: !1,
onSearch: N,
notFoundContent: n.value ? void 0 : null,
filterOption: !1,
suffixIcon: null
} : {
filterOption: X(t?.filterOption) ? O : t?.filterOption
}), {
...Z(t, [
"mode",
"value",
"onUpdate:value",
"onSearch",
"request",
"searchMode",
"onFocus",
"onBeforeSelect"
]),
placeholder: a(V),
...o
};
}), y = p(
() => u.value.map((e) => e[t.fieldNames?.value || "value"]).filter((e) => e !== f)
), P = p(() => {
if (!t.multiple || !t.addAll)
return a(c);
if (u.value.some(
(e) => e[t.fieldNames?.value || "value"] === f
)) {
const e = a(y), l = a(c) || [];
if (e.length && e.every((o) => l?.includes(o)))
return [f];
}
return a(c);
});
function k(e) {
return t.multiple && e.includes(f) ? v(a(y)) : v(e);
}
function L() {
m.value?.focus();
}
function T() {
m.value?.blur();
}
return F({
focus: L,
blur: T,
request: d
}), (e, l) => e.mode === "read" ? (S(), z("span", ne, U(A.value), 1)) : (S(), E(a(ee), K({
key: 1,
ref_key: "selectRef",
ref: m,
"allow-clear": ""
}, _.value, {
mode: e.multiple ? "multiple" : void 0,
value: P.value,
options: a(u),
loading: n.value,
"onUpdate:value": k,
onFocus: I
}), H({ _: 2 }, [
$(e.$slots, (o, h) => ({
name: h,
fn: B((i) => [
j(e.$slots, h, W(Y(i || {})))
])
})),
n.value ? {
name: "notFoundContent",
fn: B(() => [
G(a(te), { size: "small" })
]),
key: "0"
} : void 0
]), 1040, ["mode", "value", "options", "loading"]));
}
});
export {
fe as default
};