TreeSelect.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = 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_vue2.defineComponent)({
  42. name,
  43. props: treeSelectProps,
  44. emits: ["click-nav", "click-item", "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("click-item", 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("click-nav", index);
  86. const renderSidebar = () => {
  87. const Items = props.items.map((item) => (0, import_vue.createVNode)(import_sidebar_item.SidebarItem, {
  88. "dot": item.dot,
  89. "title": item.text,
  90. "badge": item.badge,
  91. "class": [bem("nav-item"), item.className],
  92. "disabled": item.disabled,
  93. "onClick": onClickSidebarItem
  94. }, null));
  95. return (0, import_vue.createVNode)(import_sidebar.Sidebar, {
  96. "class": bem("nav"),
  97. "modelValue": props.mainActiveIndex,
  98. "onChange": onSidebarChange
  99. }, {
  100. default: () => [Items]
  101. });
  102. };
  103. const renderContent = () => {
  104. if (slots.content) {
  105. return slots.content();
  106. }
  107. const selected = props.items[+props.mainActiveIndex] || {};
  108. if (selected.children) {
  109. return selected.children.map(renderSubItem);
  110. }
  111. };
  112. return () => (0, import_vue.createVNode)("div", {
  113. "class": bem(),
  114. "style": {
  115. height: (0, import_utils.addUnit)(props.height)
  116. }
  117. }, [renderSidebar(), (0, import_vue.createVNode)("div", {
  118. "class": bem("content")
  119. }, [renderContent()])]);
  120. }
  121. });