@aplus-frontend/ui
Version:
201 lines (200 loc) • 6.57 kB
JavaScript
import { defineComponent as z, ref as g, computed as u, unref as t, createElementBlock as T, openBlock as B, normalizeClass as C, createVNode as d, withCtx as b, createBlock as _, createCommentVNode as K, normalizeStyle as M, mergeProps as $ } from "vue";
import { Form as D, Space as G } from "@aplus-frontend/antdv";
import { omit as q } from "lodash-unified";
import "../../ap-field/index.mjs";
import { useDefaultPlaceholder as H } from "../../ap-field/hooks/use-default-placeholder.mjs";
import "../../config-provider/index.mjs";
import "../../hooks/index.mjs";
import "../../utils/index.mjs";
import "./popover-input/index.vue.mjs";
import Y from "./style/index.mjs";
import { splitValue as J } from "./utils.mjs";
import { useControllableValue as Q } from "../../hooks/useControllableValue.mjs";
import { useLocale as W } from "../../config-provider/hooks/use-locale.mjs";
import { useNamespace as X } from "../../config-provider/hooks/use-namespace.mjs";
import { isDef as Z } from "../../utils/is.mjs";
import ee from "../../ap-field/select/index.vue.mjs";
import { ApFieldText as te } from "../../ap-field/text/index.mjs";
import oe from "./popover-input/index.vue2.mjs";
const c = "GROUP_SEARCH_ALL", be = /* @__PURE__ */ z({
name: "BatchInputGroup",
__name: "index",
props: {
style: { type: [Boolean, null, String, Object, Array] },
inputStyle: { type: [Boolean, null, String, Object, Array] },
options: {},
hasAll: { type: Boolean, default: !0 },
value: {},
"onUpdate:value": {},
popoverPlacement: { default: "left" },
maxNum: { default: 200 },
getPopupContainer: {},
mode: { default: "edit" },
class: {},
variant: {},
size: {},
name: {},
type: { default: "text" },
onCompositionend: {},
onCompositionstart: {},
onFocus: {},
onBlur: {},
onChange: {},
onInput: {},
onKeydown: {},
onKeyup: {},
onMousedown: {},
focused: { type: Boolean },
hidden: { type: Boolean },
disabled: { type: Boolean },
prefixCls: {},
id: {},
readonly: { type: Boolean },
autofocus: { type: Boolean },
autocomplete: {},
placeholder: {},
lazy: { type: Boolean, default: !0 },
maxlength: {},
loading: { type: Boolean },
bordered: { type: Boolean, default: !0 },
showCount: { type: [Boolean, Object] },
htmlSize: {},
onPressEnter: {},
onMouseUp: {},
onRawInput: {},
valueModifiers: {},
status: {},
defaultValue: {},
inputElement: {},
triggerFocus: {},
handleReset: {},
addonBefore: {},
addonAfter: {},
prefix: {},
suffix: {},
clearIcon: {},
allowClear: { type: Boolean, default: !0 },
emptyText: { default: "--" },
beforeInput: {}
},
emits: ["update:value"],
setup(A, { emit: I }) {
const o = A, V = H("Text", o), x = I, { value: a, updateValue: r } = Q(
o,
x
), s = g(), f = g(), { t: S } = W(), { b: k } = X("batch-input-group"), v = Y("batch-input-group"), p = D.useInjectFormItemContext(), F = u(() => o.options ? o.options.length > 1 && o.hasAll ? [
{ value: c, label: S("ap.common.all") },
...o.options
] : o.options : []), U = u(() => o.options ? o.options.map((e) => e.value) : []), w = u(() => t(a)?.value?.length ? t(a).value.join(",") : ""), P = u(() => t(a)?.value?.length ? t(a).value.join(`
`) : ""), R = u(() => {
const e = t(a)?.key;
if (e?.length)
return e.length === 1 || !o.hasAll ? e[0] : c;
}), j = u(() => {
const e = t(a)?.key;
return !e || e?.length <= 1 || o.hasAll === !1 ? t(V) : (o.options || []).filter((n) => e.includes(n.value)).map((n) => n.label).join("/");
});
function E(e) {
const l = t(a) || {}, n = e === c ? t(U) : Z(e) ? [e] : [];
r({
...l,
key: n
}), p.onFieldChange();
}
function L(e) {
const l = t(a) || {}, n = e.target.value || "";
let m = J(n, ",", ",", o.maxNum);
if (n !== m) {
const h = f.value?.$el?.querySelector("input");
h && (h.value = m);
}
let i = m.split(",");
i.length === 1 && i[0] === "" && (i = []), r({
...l,
value: i
}), p.onFieldChange();
}
function N(e) {
const l = t(a) || {};
let n = e.split(/,|\n/);
r({
...l,
value: n
}), p.onFieldChange();
}
function y() {
const e = t(a) || {}, l = e.value?.filter(Boolean);
r({
...e,
value: l
}), p.onFieldChange();
}
function O(e) {
y(), o.onBlur?.(e);
}
return (e, l) => (B(), T("div", {
ref_key: "containerRef",
ref: s,
class: C([t(k)(), t(v)]),
onFocus: l[0] || (l[0] = //@ts-ignore
(...n) => e.onFocus && e.onFocus(...n)),
onBlur: l[1] || (l[1] = //@ts-ignore
(...n) => e.onBlur && e.onBlur(...n))
}, [
d(t(G).Compact, { block: "" }, {
default: b(() => [
e.options?.length ? (B(), _(t(ee), {
key: 0,
style: M(e.style),
options: F.value,
value: R.value,
"allow-clear": !1,
"dropdown-match-select-width": !1,
disabled: e.disabled,
"get-popup-container": () => s.value,
"onUpdate:value": E
}, null, 8, ["style", "options", "value", "disabled", "get-popup-container"])) : K("", !0),
d(t(te), $(
t(q)(o, [
"style",
"value",
"onUpdate:value",
"inputStyle",
"hasAll",
"options",
"onBlur"
]),
{
ref_key: "inputRef",
ref: f,
style: e.inputStyle,
value: w.value,
placeholder: j.value,
onInput: L,
onBlur: O
}
), {
suffix: b(() => [
d(oe, {
_parent: s.value,
value: P.value,
disabled: e.disabled,
placement: o.popoverPlacement,
"max-num": e.maxNum,
class: C(t(v)),
"get-popup-container": e.getPopupContainer,
"onUpdate:value": N,
onClose: y
}, null, 8, ["_parent", "value", "disabled", "placement", "max-num", "class", "get-popup-container"])
]),
_: 1
}, 16, ["style", "value", "placeholder"])
]),
_: 1
})
], 34));
}
});
export {
be as default
};