TreeSelect.mjs 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import { defineComponent, createVNode as _createVNode } from "vue";
  2. import { addUnit, makeArrayProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  3. import { Icon } from "../icon/index.mjs";
  4. import { Sidebar } from "../sidebar/index.mjs";
  5. import { SidebarItem } from "../sidebar-item/index.mjs";
  6. const [name, bem] = createNamespace("tree-select");
  7. const treeSelectProps = {
  8. max: makeNumericProp(Infinity),
  9. items: makeArrayProp(),
  10. height: makeNumericProp(300),
  11. selectedIcon: makeStringProp("success"),
  12. mainActiveIndex: makeNumericProp(0),
  13. activeId: {
  14. type: [Number, String, Array],
  15. default: 0
  16. }
  17. };
  18. var stdin_default = defineComponent({
  19. name,
  20. props: treeSelectProps,
  21. emits: ["clickNav", "clickItem", "update:activeId", "update:mainActiveIndex"],
  22. setup(props, {
  23. emit,
  24. slots
  25. }) {
  26. const isActiveItem = (id) => Array.isArray(props.activeId) ? props.activeId.includes(id) : props.activeId === id;
  27. const renderSubItem = (item) => {
  28. const onClick = () => {
  29. if (item.disabled) {
  30. return;
  31. }
  32. let activeId;
  33. if (Array.isArray(props.activeId)) {
  34. activeId = props.activeId.slice();
  35. const index = activeId.indexOf(item.id);
  36. if (index !== -1) {
  37. activeId.splice(index, 1);
  38. } else if (activeId.length < +props.max) {
  39. activeId.push(item.id);
  40. }
  41. } else {
  42. activeId = item.id;
  43. }
  44. emit("update:activeId", activeId);
  45. emit("clickItem", item);
  46. };
  47. return _createVNode("div", {
  48. "key": item.id,
  49. "class": ["van-ellipsis", bem("item", {
  50. active: isActiveItem(item.id),
  51. disabled: item.disabled
  52. })],
  53. "onClick": onClick
  54. }, [item.text, isActiveItem(item.id) && _createVNode(Icon, {
  55. "name": props.selectedIcon,
  56. "class": bem("selected")
  57. }, null)]);
  58. };
  59. const onSidebarChange = (index) => {
  60. emit("update:mainActiveIndex", index);
  61. };
  62. const onClickSidebarItem = (index) => emit("clickNav", index);
  63. const renderSidebar = () => {
  64. const Items = props.items.map((item) => _createVNode(SidebarItem, {
  65. "dot": item.dot,
  66. "badge": item.badge,
  67. "class": [bem("nav-item"), item.className],
  68. "disabled": item.disabled,
  69. "onClick": onClickSidebarItem
  70. }, {
  71. title: () => slots["nav-text"] ? slots["nav-text"](item) : item.text
  72. }));
  73. return _createVNode(Sidebar, {
  74. "class": bem("nav"),
  75. "modelValue": props.mainActiveIndex,
  76. "onChange": onSidebarChange
  77. }, {
  78. default: () => [Items]
  79. });
  80. };
  81. const renderContent = () => {
  82. if (slots.content) {
  83. return slots.content();
  84. }
  85. const selected = props.items[+props.mainActiveIndex] || {};
  86. if (selected.children) {
  87. return selected.children.map(renderSubItem);
  88. }
  89. };
  90. return () => _createVNode("div", {
  91. "class": bem(),
  92. "style": {
  93. height: addUnit(props.height)
  94. }
  95. }, [renderSidebar(), _createVNode("div", {
  96. "class": bem("content")
  97. }, [renderContent()])]);
  98. }
  99. });
  100. export {
  101. stdin_default as default,
  102. treeSelectProps
  103. };