ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
217 lines (216 loc) • 6.95 kB
JavaScript
import { defineComponent as re, ref as T, computed as y, watch as ne, toRef as ie, createVNode as r, mergeProps as O, withDirectives as ce, vShow as ue, isVNode as me } from "vue";
import { b as v } from "../chunks/module-chunk.mjs";
import pe from "../_util/pick-attrs.mjs";
import { isDividerItem as N } from "./interface.mjs";
import ye from "./ConversationsItem.mjs";
import ve from "./Creation.mjs";
import V from "./GroupTitle.mjs";
import fe from "../_util/hooks/useMergedState.mjs";
import "../x-provider/index.mjs";
import de from "./hooks/useGroupable.mjs";
import be from "./hooks/useCollapsible.mjs";
import Ce from "../_util/hooks/use-x-component-config.mjs";
import ke from "../_util/hooks/use-shortcut-keys.mjs";
import Ke from "./style/index.mjs";
import { GroupTitleContextProvider as he } from "./context.mjs";
import "../transition-collapse/index.mjs";
import { Divider as xe } from "ant-design-vue";
import Ne from "../x-provider/hooks/use-x-provider-context.mjs";
import $e from "../transition-collapse/TransitionCollapse.mjs";
function _e(m) {
return typeof m == "function" || Object.prototype.toString.call(m) === "[object Object]" && !me(m);
}
const Ue = /* @__PURE__ */ re({
name: "AXConversations",
__name: "Conversations",
props: {
items: null,
activeKey: null,
defaultActiveKey: null,
onActiveChange: {
type: Function
},
menu: {
type: Function
},
groupable: null,
styles: null,
classNames: null,
prefixCls: null,
rootClassName: null,
creation: null,
shortcutKeys: null
},
setup(m, {
expose: D
}) {
const c = m, {
prefixCls: L,
rootClassName: R,
items: X,
activeKey: k,
defaultActiveKey: E,
onActiveChange: u,
menu: K,
styles: f = {},
classNames: d = {},
groupable: F,
class: M,
style: $,
creation: Se,
shortcutKeys: Ae,
...z
} = c, _ = T(k), S = T(null), q = y(() => pe(z, {
attr: !0,
aria: !0,
data: !0
})), [B, A] = fe(E, {
value: _
});
ne(() => k, () => {
_.value = k;
});
const b = de(() => F, () => X), {
enableCollapse: H,
expandedKeys: J,
onItemExpand: Q
} = be(() => b.value.hasCollapsible, () => b.value.collapsibleOptions), U = (e) => {
const t = e.name || "";
if (e.title)
return e.title(t, {
components: {
GroupTitle: V
}
});
const s = e.label;
return typeof s == "function" ? s(t, {
groupInfo: {
name: e.name,
data: e.data
}
}) : s != null && s !== "" ? s : t;
}, {
getPrefixCls: W,
direction: G
} = Ne(), l = y(() => W("conversations", L)), o = Ce("conversations"), [Y, Z, I] = Ke(l), ee = y(() => {
var e;
return v(l.value, o.value.className, (e = o.value.classNames) == null ? void 0 : e.root, d.root, M, R, Z.value, I, {
[`${l.value}-rtl`]: G.value === "rtl"
});
}), te = y(() => {
var e;
return {
...typeof o.value.style == "object" ? o.value.style : {},
...typeof $ == "object" ? $ : {},
...((e = o.value.styles) == null ? void 0 : e.root) || {},
...f.root || {}
};
}), se = (e) => {
A(e.key);
const t = (c.items || []).find((s) => !N(s) && s.key === e.key);
u == null || u(e.key, t);
}, le = y(() => (c.items || []).filter((e) => !N(e) && !!(e != null && e.key))), {
shortcutKeysInfo: oe,
subscribe: ae
} = ke("conversations", ie(c, "shortcutKeys"));
return ae((e) => {
switch (e == null ? void 0 : e.name) {
case "items": {
const t = e.actionKeyCodeNumber !== !1 ? e.actionKeyCodeNumber : e.index;
if (typeof t == "number") {
const s = le.value[t];
s != null && s.key && !s.disabled && (A(s.key), u == null || u(s.key, s));
}
break;
}
case "creation": {
const t = c.creation;
typeof (t == null ? void 0 : t.onClick) == "function" && !(t != null && t.disabled) && t.onClick();
break;
}
}
}), D({
nativeElement: S
}), () => {
var s, P, w;
const e = c.creation, t = (s = oe.value) == null ? void 0 : s.creation;
return Y(r("ul", O(q.value, {
ref: S,
style: te.value,
class: ee.value
}), [!!e && r(ve, O({
className: v((P = o.value.classNames) == null ? void 0 : P.creation, d.creation),
style: {
...(w = o.value.styles) == null ? void 0 : w.creation,
...f.creation
},
prefixCls: `${l.value}-creation`
}, e, {
shortcutKeysIcon: Array.isArray(t == null ? void 0 : t.shortcutKeysIcon) && !Array.isArray(t.shortcutKeysIcon[0]) ? t.shortcutKeysIcon : e.shortcutKeysIcon
}), null), b.value.groupList.map((a, h) => {
var g, j;
const x = ((C) => C.map((n, p) => {
if (N(n))
return r(xe, {
key: n.key || `key-divider-${h}-${p}`,
class: `${l.value}-divider`,
dashed: n.dashed
}, null);
const i = n;
return r(ye, {
key: i.key || `key-${h}-${p}`,
info: i,
prefixCls: l.value,
direction: G.value,
class: v(d.item, o.value.classNames.item),
style: {
...o.value.styles.item,
...f.item
},
menu: typeof K == "function" ? K(i) : K,
active: B.value === i.key,
onClick: se
}, null);
}))(a.data);
if (b.value.enableGroup && a.enableGroup !== !1 && !!a.name) {
const C = a.name || `key-${h}`, n = !!(H.value && a.collapsible && a.name), p = !n || J.value.includes(a.name), i = U(a);
return r("li", {
key: C,
class: v((g = o.value.classNames) == null ? void 0 : g.group, d.group),
style: {
...((j = o.value.styles) == null ? void 0 : j.group) || {},
...f.group || {}
}
}, [r(he, {
value: {
prefixCls: l.value
}
}, {
default: () => [r(V, {
collapsible: n,
expanded: p,
onToggle: () => {
a.name && Q(a.name);
}
}, _e(i) ? i : {
default: () => [i]
})]
}), n ? r($e, {
prefixCls: l.value
}, {
default: () => [ce(r("ul", {
key: `list-${C}`,
class: v(`${l.value}-list`, `${l.value}-group-collapsible-list`)
}, [x]), [[ue, p]])]
}) : r("ul", {
class: `${l.value}-list`
}, [x])]);
}
return x;
})]));
};
}
});
export {
Ue as default
};