@aplus-frontend/ui
Version:
282 lines (281 loc) • 8.58 kB
JavaScript
import { defineComponent as Y, ref as N, shallowRef as G, computed as u, onMounted as J, watch as Q, unref as a, createElementBlock as O, createBlock as X, openBlock as C, toDisplayString as S, mergeProps as Z, h as ee, createSlots as oe, withCtx as v, createVNode as x, normalizeClass as w, createElementVNode as te, createCommentVNode as le, withModifiers as ae, renderList as ne, renderSlot as re, normalizeProps as se, guardReactiveProps as ie } from "vue";
import { Select as ue, Flex as pe, Spin as de } from "@aplus-frontend/antdv";
import { debounce as ce, isFunction as V, isArray as fe, isNil as me, omit as ve } from "lodash-unified";
import "../../config-provider/index.mjs";
import "../../hooks/index.mjs";
import { useDefaultPlaceholder as he } from "../hooks/use-default-placeholder.mjs";
import ye from "../style/index.mjs";
import { useSelectOptions as ge, SELECT_ALL_VALUE_KEY as h } from "./use-select-options.mjs";
import { useNamespace as Ce } from "../../config-provider/hooks/use-namespace.mjs";
import { useLocale as Se } from "../../config-provider/hooks/use-locale.mjs";
import { useControllableValue as we } from "../../hooks/useControllableValue.mjs";
const be = { key: 0 }, Be = ["onClick"], Pe = /* @__PURE__ */ Y({
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: {},
onActive: {},
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(I, { expose: k, emit: A }) {
let r = 0;
const o = I, { b: p } = Ce("field-select"), _ = ye("field"), b = N(!1), { t: L } = Se(), M = ce((e) => {
if (!V(o.request))
return;
r += 1;
const t = r;
d([]), n.value = !0, o.request(e).then((l) => {
r === t && (d(l), n.value = !1);
});
}, o.searchDelay), P = (e, t) => {
const l = o.fieldNames?.label || "label";
return typeof t?.[l] == "string" && t[l].toLowerCase().indexOf(e.toLowerCase()) > -1;
}, { options: s, updateOptions: d } = ge(o), y = G(), n = N(o?.loading || !1), T = A, q = u(() => {
if (o.multiple)
return o.tokenSeparators ? "tags" : "multiple";
});
async function c(e = !0) {
if (!V(o.request))
return;
n.value = !0, r += 1;
const t = r;
try {
e && d([]);
const l = await o.request(void 0, o.params);
if (t !== r)
return;
d(l);
} finally {
n.value = !1;
}
}
function D(e) {
o.onFocus?.(e), o.refetchOnFocus && r > 0 && !n.value && c(!0);
}
J(() => {
o.lazy || c();
}), Q(
() => o.params,
() => {
c();
},
{
deep: !0
}
);
const { value: f, updateValue: m } = we(o, T), R = he("Select", o), z = u(() => {
const e = a(f);
if (!e)
return o.emptyText;
const t = o.fieldNames?.label || "label", l = o.fieldNames?.value || "value";
return fe(e) ? e.map(
(i) => a(s).find((W) => W[l] === i)?.[t]
).filter(Boolean).join("、") || o.emptyText : a(s).find(
(i) => i[l] === e
)?.[t] || o.emptyText;
}), E = u(() => {
const e = !!o?.showSearch, t = o.searchMode;
let l = {};
return e && (l = t === "request" ? {
defaultActiveFirstOption: !1,
onSearch: M,
notFoundContent: n.value ? void 0 : null,
filterOption: !1,
suffixIcon: null
} : {
filterOption: me(o?.filterOption) ? P : o?.filterOption
}), {
...ve(o, [
"mode",
"value",
"onUpdate:value",
"onSearch",
"request",
"searchMode",
"onFocus",
"onBeforeSelect"
]),
placeholder: a(R),
...l
};
}), B = u(
() => s.value.map((e) => e[o.fieldNames?.value || "value"]).filter((e) => e !== h)
), U = u(() => {
if (!o.multiple || !o.addAll)
return a(f);
if (s.value.some(
(e) => e[o.fieldNames?.value || "value"] === h
)) {
const e = a(B), t = a(f) || [];
if (e.length && e.every((l) => t?.includes(l)))
return [h];
}
return a(f);
});
function K(e) {
return o.multiple && e.includes(h) ? m(a(B)) : m(e);
}
function $() {
y.value?.focus();
}
function j() {
y.value?.blur();
}
function F(e, t) {
const l = o.fieldNames?.[t] ?? t;
return e[l];
}
function H(e) {
const t = F(e, "value");
m(o.multiple ? [t] : t);
}
return k({
focus: $,
blur: j,
request: c
}), (e, t) => e.mode === "read" ? (C(), O("span", be, S(z.value), 1)) : (C(), X(a(ue), Z({
key: 1,
ref_key: "selectRef",
ref: y,
"allow-clear": ""
}, E.value, {
mode: q.value,
value: U.value,
options: a(s),
loading: n.value,
"menu-item-selected-icon": ee("span"),
"popup-class-name": `${a(p)("popup")} ${a(_)}`,
open: b.value,
"onUpdate:value": K,
onFocus: D,
onDropdownVisibleChange: t[0] || (t[0] = (l) => b.value = l)
}), oe({
option: v((l) => [
x(a(pe), {
justify: "space-between",
align: "center",
class: w(a(p)("popup-option-wrapper")),
gap: 8
}, {
default: v(() => [
te("span", {
class: w(a(p)("popup-option-label"))
}, S(F(l, "label")), 3),
e.multiple ? (C(), O("span", {
key: 0,
class: w(a(p)("popup-option-action")),
onClick: ae(() => H(l), ["stop"])
}, S(a(L)("ap.field.chooseOnly")), 11, Be)) : le("", !0)
]),
_: 2
}, 1032, ["class"])
]),
_: 2
}, [
ne(e.$slots, (l, g) => ({
name: g,
fn: v((i) => [
re(e.$slots, g, se(ie(i || {})))
])
})),
n.value ? {
name: "notFoundContent",
fn: v(() => [
x(a(de), { size: "small" })
]),
key: "0"
} : void 0
]), 1040, ["mode", "value", "options", "loading", "menu-item-selected-icon", "popup-class-name", "open"]));
}
});
export {
Pe as default
};