yanzhen-design-vue
Version:
242 lines (241 loc) • 11.7 kB
JavaScript
import { defineComponent, useAttrs, openBlock, createElementBlock, Fragment, createVNode, unref, mergeProps, isRef, withCtx, renderSlot, createTextVNode, toDisplayString, createBlock, normalizeClass, createCommentVNode, withModifiers, normalizeStyle, renderList, createElementVNode } from "vue";
import { Modal, Checkbox, Flex, Avatar, Tooltip, Input, Tag } from "ant-design-vue";
import { UserOutlined, CloseCircleOutlined } from "@ant-design/icons-vue";
import { YzAvatar } from "../../avatar/index.mjs";
import { SlotEvents } from "@yanzhen-libs/utils-vue";
import "./contacts.vue.mjs";
import { contactsSelectName, contactsSelectProps, contactsSelectEmits, contactsSelectOptions } from "./contacts-select.mjs";
import { useContactsSelect } from "./use-contacts-select.mjs";
import _sfc_main$1 from "./contacts.vue2.mjs";
const _hoisted_1 = ["src"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: contactsSelectName },
__name: "contacts-select",
props: contactsSelectProps,
emits: contactsSelectEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const { ns } = contactsSelectOptions;
const props = __props;
const emit = __emit;
const $attrs = useAttrs();
const {
refs: { contactsRef },
ctx: { _open, modalProps, contactsProps, selectProps, listType, selectedValue, selectedData },
methods,
handleDelete,
handleOpen,
handleConfirm,
handleCancel,
handleContactsChange,
handleOverageText
} = useContactsSelect(props, emit);
__expose({
...methods
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(unref(Modal), mergeProps({
open: unref(_open),
"onUpdate:open": _cache[1] || (_cache[1] = ($event) => isRef(_open) ? _open.value = $event : null),
"wrap-class-name": [unref(ns).b(), unref(ns).b("modal-wrap")],
class: [unref(ns).e("modal")],
width: "",
centered: ""
}, unref(modalProps), {
"force-render": true,
"destroy-on-close": true,
onOk: unref(handleConfirm),
onCancel: unref(handleCancel),
onClose: unref(handleCancel)
}), {
title: withCtx(() => [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(unref(modalProps).title), 1)
])
]),
default: withCtx(() => [
createVNode(_sfc_main$1, mergeProps({
ref_key: "contactsRef",
ref: contactsRef,
"selected-value": unref(selectedValue),
"onUpdate:selectedValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedValue) ? selectedValue.value = $event : null)
}, unref(contactsProps), { onChange: unref(handleContactsChange) }), {
"all-select": withCtx(({ state, onTrigger }) => [
state.show ? (openBlock(), createBlock(unref(Checkbox), {
key: 0,
class: normalizeClass([unref(ns).e("all-select")]),
checked: state.checked,
indeterminate: state.indeterminate,
onChange: ($event) => onTrigger(state)
}, {
default: withCtx(() => _cache[3] || (_cache[3] = [
createTextVNode(" 全选 ")
])),
_: 2
}, 1032, ["class", "checked", "indeterminate", "onChange"])) : createCommentVNode("", true)
]),
_: 1
}, 16, ["selected-value", "onChange"])
]),
_: 3
}, 16, ["open", "wrap-class-name", "class", "onOk", "onCancel", "onClose"]),
unref(listType) !== false ? (openBlock(), createBlock(unref(SlotEvents), {
key: 0,
onClick: withModifiers(unref(handleOpen), ["stop"])
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", { selectedValue: unref(selectedValue) }, () => [
unref(listType).includes("avatar") ? (openBlock(), createBlock(unref(Flex), {
key: 0,
vertical: false,
align: "center",
gap: 4,
class: normalizeClass([unref(ns).e("input-wrap"), unref($attrs).class]),
style: normalizeStyle(unref($attrs).style)
}, {
default: withCtx(() => [
createVNode(unref(Avatar).Group, {
"max-count": unref(selectProps).maxCount,
onClick: withModifiers(unref(handleOpen), ["stop"])
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedValue), (item) => {
return openBlock(), createBlock(unref(Tooltip), {
key: item.value,
title: item.label,
placement: "top"
}, {
default: withCtx(() => [
createElementVNode("span", null, [
createVNode(unref(YzAvatar), {
gap: 0,
size: 30,
src: item.avatar,
text: item.label,
style: { marginRight: "10px" }
}, {
icon: withCtx(() => [
createVNode(unref(UserOutlined))
]),
_: 2
}, 1032, ["src", "text"])
])
]),
_: 2
}, 1032, ["title"]);
}), 128))
]),
_: 1
}, 8, ["max-count", "onClick"]),
createVNode(unref(YzAvatar), {
gap: 0,
size: 30,
onClick: withModifiers(unref(handleOpen), ["stop"])
}, {
icon: withCtx(() => [
createVNode(unref(UserOutlined))
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
}, 8, ["class", "style"])) : unref(listType).includes("input") ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([unref(ns).e("input-wrap"), unref(ns).is("input"), unref($attrs).class]),
style: normalizeStyle(unref($attrs).style)
}, [
unref(selectedValue).length === 0 ? (openBlock(), createBlock(unref(Input), {
key: 0,
readonly: "",
placeholder: unref(selectProps).placeholder
}, null, 8, ["placeholder"])) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(ns).is("select-wrap"))
}, [
createVNode(unref(Flex), {
vertical: false,
align: "center",
gap: 4
}, {
default: withCtx(() => [
unref(selectProps).multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedData).values, (item, index) => {
return openBlock(), createBlock(unref(Tag), {
key: item.value,
closable: "",
class: normalizeClass(unref(ns).is("select-tag")),
onClose: withModifiers(($event) => unref(handleDelete)(item, index), ["prevent"])
}, {
default: withCtx(() => [
item.flag === "PRIMARY" && unref(selectProps).primaryIcon ? (openBlock(), createElementBlock("img", {
key: 0,
class: normalizeClass(unref(ns).is("select-tag-primary-icon")),
src: unref(selectProps).primaryIcon,
alt: ""
}, null, 10, _hoisted_1)) : createCommentVNode("", true),
createVNode(unref(Tooltip), {
title: item.label
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.label), 1)
]),
_: 2
}, 1032, ["title"])
]),
_: 2
}, 1032, ["class", "onClose"]);
}), 128)),
unref(selectedData).overage.length > 0 ? (openBlock(), createBlock(unref(Tooltip), {
key: 0,
title: unref(handleOverageText)(unref(selectedData).overage)
}, {
default: withCtx(() => [
createVNode(unref(Tag), {
class: normalizeClass(unref(ns).is("select-tag"))
}, {
default: withCtx(() => [
createTextVNode("+" + toDisplayString(unref(selectedData).overage.length), 1)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["title"])) : createCommentVNode("", true)
], 64)) : unref(selectedValue).length > 0 ? (openBlock(), createBlock(unref(Tooltip), {
key: 1,
title: unref(handleOverageText)(unref(selectedValue))
}, {
default: withCtx(() => [
createVNode(unref(Tag), {
bordered: false,
class: normalizeClass([unref(ns).is("select-tag"), unref(ns).is("no-multiple")])
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(handleOverageText)(unref(selectedValue))), 1)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["title"])) : createCommentVNode("", true)
]),
_: 1
})
], 2)),
unref(selectProps).autoClear && unref(selectedValue).length > 0 ? (openBlock(), createBlock(unref(CloseCircleOutlined), {
key: 2,
class: normalizeClass(unref(ns).is("select-close")),
onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(handleDelete)(), ["stop", "prevent"]))
}, null, 8, ["class"])) : createCommentVNode("", true)
], 6)) : createCommentVNode("", true)
])
]),
_: 3
}, 8, ["onClick"])) : createCommentVNode("", true)
], 64);
};
}
});
export {
_sfc_main as default
};