index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
  2. // Utils
  3. import { createNamespace, addUnit } from '../utils';
  4. import { emit, inherit } from '../utils/functional'; // Components
  5. import Icon from '../icon';
  6. import Sidebar from '../sidebar';
  7. import SidebarItem from '../sidebar-item'; // Types
  8. var _createNamespace = createNamespace('tree-select'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1];
  11. function TreeSelect(h, props, slots, ctx) {
  12. var items = props.items,
  13. height = props.height,
  14. activeId = props.activeId,
  15. selectedIcon = props.selectedIcon,
  16. mainActiveIndex = props.mainActiveIndex;
  17. if (process.env.NODE_ENV === 'development') {
  18. if (ctx.listeners.navclick) {
  19. console.warn('[Vant] TreeSelect: "navclick" event is deprecated, use "click-nav" instead.');
  20. }
  21. if (ctx.listeners.itemclick) {
  22. console.warn('[Vant] TreeSelect: "itemclick" event is deprecated, use "click-item" instead.');
  23. }
  24. }
  25. var selectedItem = items[+mainActiveIndex] || {};
  26. var subItems = selectedItem.children || [];
  27. var isMultiple = Array.isArray(activeId);
  28. function isActiveItem(id) {
  29. return isMultiple ? activeId.indexOf(id) !== -1 : activeId === id;
  30. }
  31. var Navs = items.map(function (item) {
  32. var _item$badge;
  33. return h(SidebarItem, {
  34. "attrs": {
  35. "dot": item.dot,
  36. "info": (_item$badge = item.badge) != null ? _item$badge : item.info,
  37. "title": item.text,
  38. "disabled": item.disabled
  39. },
  40. "class": [bem('nav-item'), item.className]
  41. });
  42. });
  43. function Content() {
  44. if (slots.content) {
  45. return slots.content();
  46. }
  47. return subItems.map(function (item) {
  48. return h("div", {
  49. "key": item.id,
  50. "class": ['van-ellipsis', bem('item', {
  51. active: isActiveItem(item.id),
  52. disabled: item.disabled
  53. })],
  54. "on": {
  55. "click": function click() {
  56. if (!item.disabled) {
  57. var newActiveId = item.id;
  58. if (isMultiple) {
  59. newActiveId = activeId.slice();
  60. var index = newActiveId.indexOf(item.id);
  61. if (index !== -1) {
  62. newActiveId.splice(index, 1);
  63. } else if (newActiveId.length < props.max) {
  64. newActiveId.push(item.id);
  65. }
  66. }
  67. emit(ctx, 'update:active-id', newActiveId);
  68. emit(ctx, 'click-item', item); // compatible with legacy usage, should be removed in next major version
  69. emit(ctx, 'itemclick', item);
  70. }
  71. }
  72. }
  73. }, [item.text, isActiveItem(item.id) && h(Icon, {
  74. "attrs": {
  75. "name": selectedIcon
  76. },
  77. "class": bem('selected')
  78. })]);
  79. });
  80. }
  81. return h("div", _mergeJSXProps([{
  82. "class": bem(),
  83. "style": {
  84. height: addUnit(height)
  85. }
  86. }, inherit(ctx)]), [h(Sidebar, {
  87. "class": bem('nav'),
  88. "attrs": {
  89. "activeKey": mainActiveIndex
  90. },
  91. "on": {
  92. "change": function change(index) {
  93. emit(ctx, 'update:main-active-index', index);
  94. emit(ctx, 'click-nav', index); // compatible with legacy usage, should be removed in next major version
  95. emit(ctx, 'navclick', index);
  96. }
  97. }
  98. }, [Navs]), h("div", {
  99. "class": bem('content')
  100. }, [Content()])]);
  101. }
  102. TreeSelect.props = {
  103. max: {
  104. type: [Number, String],
  105. default: Infinity
  106. },
  107. items: {
  108. type: Array,
  109. default: function _default() {
  110. return [];
  111. }
  112. },
  113. height: {
  114. type: [Number, String],
  115. default: 300
  116. },
  117. activeId: {
  118. type: [Number, String, Array],
  119. default: 0
  120. },
  121. selectedIcon: {
  122. type: String,
  123. default: 'success'
  124. },
  125. mainActiveIndex: {
  126. type: [Number, String],
  127. default: 0
  128. }
  129. };
  130. export default createComponent(TreeSelect);