@aplus-frontend/ui
Version:
186 lines (185 loc) • 7.14 kB
JavaScript
import { defineComponent as z, ref as O, computed as T, createElementBlock as r, openBlock as d, normalizeStyle as A, normalizeClass as a, unref as s, createVNode as b, withCtx as V, createElementVNode as c, createCommentVNode as y, Fragment as N, renderList as R, withModifiers as f, renderSlot as h, createTextVNode as g, toDisplayString as u, createBlock as L } from "vue";
import { PlusOutlined as j, InfoCircleFilled as M } from "@ant-design/icons-vue";
import { Popover as q } from "@aplus-frontend/antdv";
import { IconApAdLinePoor as G } from "@aplus-frontend/icon";
import "../../config-provider/index.mjs";
import J from "./style/index.mjs";
import { useNamespace as Q } from "../../config-provider/hooks/use-namespace.mjs";
const U = ["onClick"], W = { class: "label" }, X = { class: "value" }, Y = ["onClick"], Z = ["onClick"], _ = { class: "label" }, x = { class: "value" }, ee = { class: "text" }, de = /* @__PURE__ */ z({
name: "ApValueSelectCard",
__name: "index",
props: {
options: {},
selectedKeys: { default: () => [] },
highlightedKeys: { default: () => [] },
maxSelected: { default: 4 },
maxRowDisplay: { default: 4 },
popoverTitle: { default: "" },
showTitleIcon: { type: Boolean, default: !0 },
showCloseIcon: { type: Boolean, default: !0 },
showAddButton: { type: Boolean, default: !0 },
addButtonText: { default: "" },
getContainer: { type: Function, default: (v) => v.parentElement || document.body },
getCardStyle: { type: Function, default: () => ({}) },
wrapperStyle: { type: [Boolean, null, String, Object, Array] }
},
emits: ["update:selectedKeys", "update:highlightedKeys", "change", "select", "remove", "highlight"],
setup(v, { expose: F, emit: H }) {
const o = H, l = v, { b: n } = Q("ap-value-select-card"), D = J("ap-value-select-card"), E = O(null), p = O(!1), K = T(() => l.options), C = T(() => K.value.filter(
(e) => l.selectedKeys.includes(e.key)
)), B = (e) => l.selectedKeys.includes(e), S = (e) => l.highlightedKeys.includes(e), $ = (e) => {
l.selectedKeys.includes(e) ? k(e) : I(e);
}, I = (e) => {
if (l.maxSelected && l.selectedKeys.length >= l.maxSelected)
return;
const i = [...l.selectedKeys, e];
o("update:selectedKeys", i), o("change", i), o("select", e), l.highlightedKeys.includes(e) || w(e);
}, k = (e) => {
if (l.selectedKeys.length <= 1 || l.highlightedKeys.length <= 1 && l.highlightedKeys.includes(e))
return;
const i = l.selectedKeys.filter((t) => t !== e);
if (o("update:selectedKeys", i), o("change", i), o("remove", e), l.highlightedKeys.includes(e)) {
const t = l.highlightedKeys.filter((m) => m !== e);
o("update:highlightedKeys", t), o("highlight", t);
}
}, w = (e) => {
let i;
if (l.highlightedKeys.includes(e))
if (l.highlightedKeys.length > 1)
i = l.highlightedKeys.filter((t) => t !== e);
else
return;
else
i = [...l.highlightedKeys, e];
o("update:highlightedKeys", i), o("highlight", i);
}, P = (e) => {
e || (p.value = e);
};
return F({
popoverVisible: p,
allOptions: K,
selectedOptions: C,
isSelected: B,
isHighlighted: S,
toggleOption: $,
addOption: I,
removeOption: k,
highlightOption: w
}), (e, i) => (d(), r("div", {
class: a([s(n)(), s(D)]),
style: A({
...e.wrapperStyle,
"--ap-value-select-card-column-count": e.maxRowDisplay
})
}, [
b(s(q), {
open: p.value,
trigger: "click",
placement: "bottomRight",
arrow: !1,
"get-popup-container": e.getContainer,
onOpenChange: P
}, {
content: V(() => [
c("div", {
class: a(s(n)("popover"))
}, [
e.popoverTitle ? (d(), r("div", {
key: 0,
class: a(s(n)("title"))
}, [
e.showTitleIcon ? (d(), L(s(M), {
key: 0,
class: a(s(n)("title-icon"))
}, null, 8, ["class"])) : y("", !0),
g(" " + u(e.popoverTitle), 1)
], 2)) : y("", !0),
c("div", {
class: a(s(n)("list"))
}, [
(d(!0), r(N, null, R(K.value, (t) => (d(), r("div", {
key: t.key,
class: a([
s(n)("list-item"),
"all",
{
select: B(t.key),
disabled: e.maxSelected && e.selectedKeys.length >= e.maxSelected
}
]),
onClick: f((m) => $(t.key), ["stop"])
}, [
c("div", W, [
h(e.$slots, "popover-label", { option: t }, () => [
g(u(t.label), 1)
])
]),
c("div", X, [
h(e.$slots, "popover-value", { option: t }, () => [
g(u(t.value), 1)
])
])
], 10, U))), 128))
], 2)
], 2)
]),
default: V(() => [
c("div", {
class: a(s(n)("list"))
}, [
(d(!0), r(N, null, R(C.value, (t) => (d(), r("div", {
key: t.key,
ref_for: !0,
ref_key: "listItemRef",
ref: E,
class: a([
s(n)("list-item"),
{
select: S(t.key),
custom: t.customClass
},
t.customClass
]),
style: A(e.getCardStyle(t.key)),
onClick: f((m) => w(t.key), ["stop"])
}, [
e.showCloseIcon && (!(e.highlightedKeys.length === 1 && S(t.key)) && C.value.length > 1) ? (d(), r("div", {
key: 0,
class: a(s(n)("list-item-close")),
onClick: f((m) => k(t.key), ["stop"])
}, [
h(e.$slots, "close-icon", {}, () => [
b(s(G))
])
], 10, Z)) : y("", !0),
c("div", _, [
h(e.$slots, "label", { option: t }, () => [
g(u(t.label), 1)
])
]),
c("div", x, [
h(e.$slots, "value", { option: t }, () => [
g(u(t.value), 1)
])
])
], 14, Y))), 128)),
e.showAddButton && (!e.maxSelected || e.selectedKeys.length < e.maxSelected) ? (d(), r("div", {
key: 0,
class: a([s(n)("list-item"), "choose"]),
onClick: i[0] || (i[0] = f((t) => p.value = !0, ["stop"]))
}, [
h(e.$slots, "add-button", {}, () => [
b(s(j)),
c("span", ee, u(e.addButtonText), 1)
])
], 2)) : y("", !0)
], 2)
]),
_: 3
}, 8, ["open", "get-popup-container"])
], 6));
}
});
export {
de as default
};