TreeSelect.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default,
  21. treeSelectProps: () => treeSelectProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_utils = require("../utils");
  26. var import_icon = require("../icon");
  27. var import_sidebar = require("../sidebar");
  28. var import_sidebar_item = require("../sidebar-item");
  29. const [name, bem] = (0, import_utils.createNamespace)("tree-select");
  30. const treeSelectProps = {
  31. max: (0, import_utils.makeNumericProp)(Infinity),
  32. items: (0, import_utils.makeArrayProp)(),
  33. height: (0, import_utils.makeNumericProp)(300),
  34. selectedIcon: (0, import_utils.makeStringProp)("success"),
  35. mainActiveIndex: (0, import_utils.makeNumericProp)(0),
  36. activeId: {
  37. type: [Number, String, Array],
  38. default: 0
  39. }
  40. };
  41. var stdin_default = (0, import_vue.defineComponent)({
  42. name,
  43. props: treeSelectProps,
  44. emits: ["clickNav", "clickItem", "update:activeId", "update:mainActiveIndex"],
  45. setup(props, {
  46. emit,
  47. slots
  48. }) {
  49. const isActiveItem = (id) => Array.isArray(props.activeId) ? props.activeId.includes(id) : props.activeId === id;
  50. const renderSubItem = (item) => {
  51. const onClick = () => {
  52. if (item.disabled) {
  53. return;
  54. }
  55. let activeId;
  56. if (Array.isArray(props.activeId)) {
  57. activeId = props.activeId.slice();
  58. const index = activeId.indexOf(item.id);
  59. if (index !== -1) {
  60. activeId.splice(index, 1);
  61. } else if (activeId.length < +props.max) {
  62. activeId.push(item.id);
  63. }
  64. } else {
  65. activeId = item.id;
  66. }
  67. emit("update:activeId", activeId);
  68. emit("clickItem", item);
  69. };
  70. return (0, import_vue.createVNode)("div", {
  71. "key": item.id,
  72. "class": ["van-ellipsis", bem("item", {
  73. active: isActiveItem(item.id),
  74. disabled: item.disabled
  75. })],
  76. "onClick": onClick
  77. }, [item.text, isActiveItem(item.id) && (0, import_vue.createVNode)(import_icon.Icon, {
  78. "name": props.selectedIcon,
  79. "class": bem("selected")
  80. }, null)]);
  81. };
  82. const onSidebarChange = (index) => {
  83. emit("update:mainActiveIndex", index);
  84. };
  85. const onClickSidebarItem = (index) => emit("clickNav", index);
  86. const renderSidebar = () => {
  87. const Items = props.items.map((item) => (0, import_vue.createVNode)(import_sidebar_item.SidebarItem, {
  88. "dot": item.dot,
  89. "badge": item.badge,
  90. "class": [bem("nav-item"), item.className],
  91. "disabled": item.disabled,
  92. "onClick": onClickSidebarItem
  93. }, {
  94. title: () => slots["nav-text"] ? slots["nav-text"](item) : item.text
  95. }));
  96. return (0, import_vue.createVNode)(import_sidebar.Sidebar, {
  97. "class": bem("nav"),
  98. "modelValue": props.mainActiveIndex,
  99. "onChange": onSidebarChange
  100. }, {
  101. default: () => [Items]
  102. });
  103. };
  104. const renderContent = () => {
  105. if (slots.content) {
  106. return slots.content();
  107. }
  108. const selected = props.items[+props.mainActiveIndex] || {};
  109. if (selected.children) {
  110. return selected.children.map(renderSubItem);
  111. }
  112. };
  113. return () => (0, import_vue.createVNode)("div", {
  114. "class": bem(),
  115. "style": {
  116. height: (0, import_utils.addUnit)(props.height)
  117. }
  118. }, [renderSidebar(), (0, import_vue.createVNode)("div", {
  119. "class": bem("content")
  120. }, [renderContent()])]);
  121. }
  122. });