You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
3.8 KiB

import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
// Utils
import { createNamespace, addUnit } from '../utils';
import { emit, inherit } from '../utils/functional'; // Components
import Icon from '../icon';
import Sidebar from '../sidebar';
import SidebarItem from '../sidebar-item'; // Types
var _createNamespace = createNamespace('tree-select'),
createComponent = _createNamespace[0],
bem = _createNamespace[1];
function TreeSelect(h, props, slots, ctx) {
var items = props.items,
height = props.height,
activeId = props.activeId,
selectedIcon = props.selectedIcon,
mainActiveIndex = props.mainActiveIndex;
if (process.env.NODE_ENV === 'development') {
if (ctx.listeners.navclick) {
console.warn('[Vant] TreeSelect: "navclick" event is deprecated, use "click-nav" instead.');
}
if (ctx.listeners.itemclick) {
console.warn('[Vant] TreeSelect: "itemclick" event is deprecated, use "click-item" instead.');
}
}
var selectedItem = items[+mainActiveIndex] || {};
var subItems = selectedItem.children || [];
var isMultiple = Array.isArray(activeId);
function isActiveItem(id) {
return isMultiple ? activeId.indexOf(id) !== -1 : activeId === id;
}
var Navs = items.map(function (item) {
var _item$badge;
return h(SidebarItem, {
"attrs": {
"dot": item.dot,
"info": (_item$badge = item.badge) != null ? _item$badge : item.info,
"title": item.text,
"disabled": item.disabled
},
"class": [bem('nav-item'), item.className]
});
});
function Content() {
if (slots.content) {
return slots.content();
}
return subItems.map(function (item) {
return h("div", {
"key": item.id,
"class": ['van-ellipsis', bem('item', {
active: isActiveItem(item.id),
disabled: item.disabled
})],
"on": {
"click": function click() {
if (!item.disabled) {
var newActiveId = item.id;
if (isMultiple) {
newActiveId = activeId.slice();
var index = newActiveId.indexOf(item.id);
if (index !== -1) {
newActiveId.splice(index, 1);
} else if (newActiveId.length < props.max) {
newActiveId.push(item.id);
}
}
emit(ctx, 'update:active-id', newActiveId);
emit(ctx, 'click-item', item); // compatible with legacy usage, should be removed in next major version
emit(ctx, 'itemclick', item);
}
}
}
}, [item.text, isActiveItem(item.id) && h(Icon, {
"attrs": {
"name": selectedIcon
},
"class": bem('selected')
})]);
});
}
return h("div", _mergeJSXProps([{
"class": bem(),
"style": {
height: addUnit(height)
}
}, inherit(ctx)]), [h(Sidebar, {
"class": bem('nav'),
"attrs": {
"activeKey": mainActiveIndex
},
"on": {
"change": function change(index) {
emit(ctx, 'update:main-active-index', index);
emit(ctx, 'click-nav', index); // compatible with legacy usage, should be removed in next major version
emit(ctx, 'navclick', index);
}
}
}, [Navs]), h("div", {
"class": bem('content')
}, [Content()])]);
}
TreeSelect.props = {
max: {
type: [Number, String],
default: Infinity
},
items: {
type: Array,
default: function _default() {
return [];
}
},
height: {
type: [Number, String],
default: 300
},
activeId: {
type: [Number, String, Array],
default: 0
},
selectedIcon: {
type: String,
default: 'success'
},
mainActiveIndex: {
type: [Number, String],
default: 0
}
};
export default createComponent(TreeSelect);