TreeSelect.mjs 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent } from "vue";
  3. import { addUnit, makeArrayProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  4. import { Icon } from "../icon/index.mjs";
  5. import { Sidebar } from "../sidebar/index.mjs";
  6. import { SidebarItem } from "../sidebar-item/index.mjs";
  7. const [name, bem] = createNamespace("tree-select");
  8. const treeSelectProps = {
  9. max: makeNumericProp(Infinity),
  10. items: makeArrayProp(),
  11. height: makeNumericProp(300),
  12. selectedIcon: makeStringProp("success"),
  13. mainActiveIndex: makeNumericProp(0),
  14. activeId: {
  15. type: [Number, String, Array],
  16. default: 0
  17. }
  18. };
  19. var stdin_default = defineComponent({
  20. name,
  21. props: treeSelectProps,
  22. emits: ["click-nav", "click-item", "update:activeId", "update:mainActiveIndex"],
  23. setup(props, {
  24. emit,
  25. slots
  26. }) {
  27. const isActiveItem = (id) => Array.isArray(props.activeId) ? props.activeId.includes(id) : props.activeId === id;
  28. const renderSubItem = (item) => {
  29. const onClick = () => {
  30. if (item.disabled) {
  31. return;
  32. }
  33. let activeId;
  34. if (Array.isArray(props.activeId)) {
  35. activeId = props.activeId.slice();
  36. const index = activeId.indexOf(item.id);
  37. if (index !== -1) {
  38. activeId.splice(index, 1);
  39. } else if (activeId.length < props.max) {
  40. activeId.push(item.id);
  41. }
  42. } else {
  43. activeId = item.id;
  44. }
  45. emit("update:activeId", activeId);
  46. emit("click-item", item);
  47. };
  48. return _createVNode("div", {
  49. "key": item.id,
  50. "class": ["van-ellipsis", bem("item", {
  51. active: isActiveItem(item.id),
  52. disabled: item.disabled
  53. })],
  54. "onClick": onClick
  55. }, [item.text, isActiveItem(item.id) && _createVNode(Icon, {
  56. "name": props.selectedIcon,
  57. "class": bem("selected")
  58. }, null)]);
  59. };
  60. const onSidebarChange = (index) => {
  61. emit("update:mainActiveIndex", index);
  62. };
  63. const onClickSidebarItem = (index) => emit("click-nav", index);
  64. const renderSidebar = () => {
  65. const Items = props.items.map((item) => _createVNode(SidebarItem, {
  66. "dot": item.dot,
  67. "title": item.text,
  68. "badge": item.badge,
  69. "class": [bem("nav-item"), item.className],
  70. "disabled": item.disabled,
  71. "onClick": onClickSidebarItem
  72. }, null));
  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. };