tdesign-mobile-vue
Version:
tdesign-mobile-vue
328 lines (320 loc) • 12.9 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _typeof = require('@babel/runtime/helpers/typeof');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Vue = require('vue');
var sideBar_index = require('../side-bar/index.js');
var radio_index = require('../radio/index.js');
var checkbox_index = require('../checkbox/index.js');
var config = require('../config.js');
var _common_js_log_log = require('../_common/js/log/log.js');
var treeSelect_props = require('./props.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var shared_util = require('../shared/util.js');
require('../side-bar/side-bar.js');
require('../side-bar/props.js');
require('../hooks/tnode.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-c041cd95.js');
require('../_chunks/dep-db763263.js');
require('../_chunks/dep-d16bf091.js');
require('../_chunks/dep-c6554877.js');
require('../_chunks/dep-a8725fec.js');
require('../_chunks/dep-88660f08.js');
require('../_chunks/dep-bcc78903.js');
require('../_chunks/dep-e1cc657b.js');
require('../_chunks/dep-a58ecafb.js');
require('../_chunks/dep-04cf2308.js');
require('../_chunks/dep-ea3a180f.js');
require('../_chunks/dep-016f6f84.js');
require('../_chunks/dep-abe9931d.js');
require('../_chunks/dep-671f1b66.js');
require('../_chunks/dep-a1831458.js');
require('../_chunks/dep-082c7326.js');
require('../_chunks/dep-591548d1.js');
require('../_chunks/dep-a9fd9906.js');
require('../_chunks/dep-4a0acbaa.js');
require('../_common/js/utils/general.js');
require('../_chunks/dep-ede0b0a5.js');
require('../_chunks/dep-dafca6f5.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-88b647f4.js');
require('../_chunks/dep-f339c931.js');
require('dayjs');
require('../_chunks/dep-89205991.js');
require('../_chunks/dep-a837a88d.js');
require('../_chunks/dep-d2416277.js');
require('../_chunks/dep-f5894bc3.js');
require('../_chunks/dep-d404c733.js');
require('../_chunks/dep-bd009758.js');
require('../_chunks/dep-83213f5d.js');
require('../_chunks/dep-412d3c4b.js');
require('../_chunks/dep-644f5d6a.js');
require('../_chunks/dep-933759bc.js');
require('../_chunks/dep-a625ee7d.js');
require('../_chunks/dep-e49294a5.js');
require('../side-bar/side-bar-item.js');
require('../side-bar/side-bar-item-props.js');
require('../badge/index.js');
require('../badge/badge.js');
require('../badge/props.js');
require('../_chunks/dep-dea6ba04.js');
require('../shared/component.js');
require('../radio/radio.js');
require('tdesign-icons-vue-next');
require('../radio/props.js');
require('../form/hooks.js');
require('../_chunks/dep-f228bd6e.js');
require('../radio/radio-group.js');
require('../radio/radio-group-props.js');
require('../_chunks/dep-a316fb34.js');
require('../_chunks/dep-d8e3a669.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../shared/render-tnode.js');
require('../checkbox/checkbox-group.js');
require('../checkbox/checkbox-group-props.js');
require('../checkbox/hooks/getOptions.js');
require('../hooks/useChildSlots.js');
require('../checkbox/hooks/setCheckAllStatus.js');
require('../_chunks/dep-0659f7fe.js');
require('../_chunks/dep-f1321e96.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !Vue.isVNode(s);
}
var prefix = config["default"].prefix;
var _TreeSelect = Vue.defineComponent({
name: "".concat(prefix, "-tree-select"),
components: {
TSideBar: sideBar_index.SideBar,
TSideBarItem: sideBar_index.SideBarItem,
TRadio: radio_index.Radio,
TRadioGroup: radio_index.RadioGroup
},
props: treeSelect_props["default"],
emits: ["update:value", "update:modelValue", "change"],
setup: function setup(props2, context) {
var treeSelectClass = hooks_useClass.usePrefixClass("tree-select");
var _toRefs = Vue.toRefs(props2),
height = _toRefs.height,
customStyle = _toRefs.customStyle,
value = _toRefs.value,
modelValue = _toRefs.modelValue,
options = _toRefs.options,
keys = _toRefs.keys,
multiple = _toRefs.multiple;
var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
innerValue = _useVModel2[0],
setInnerValue = _useVModel2[1];
var leafLevel = Vue.ref(0);
var treeMaxLevel = Vue.ref(0);
var treeOptions = Vue.ref([]);
var rootStyle = Vue.computed(function () {
return ["height: ".concat(shared_util.convertUnit(height.value)), customStyle.value].join(";");
});
var buildTreeOptions = function buildTreeOptions() {
var options2 = props2.options,
multiple2 = props2.multiple,
keys2 = props2.keys;
var level = -1;
var tmpTreeOptions = [];
var node = {
children: options2
};
if (options2.length === 0 || Array.isArray(value) && value.length === 0) return;
var _loop = function _loop() {
var _innerValue$value;
level += 1;
var list = node.children.map(function (item) {
return {
label: item[(keys2 === null || keys2 === void 0 ? void 0 : keys2.label) || "label"],
value: item[(keys2 === null || keys2 === void 0 ? void 0 : keys2.value) || "value"],
disabled: item[(keys2 === null || keys2 === void 0 ? void 0 : keys2.disabled) || "disabled"],
children: item.children,
level: leafLevel.value
};
});
var thisValue = (_innerValue$value = innerValue.value) === null || _innerValue$value === void 0 ? void 0 : _innerValue$value[level];
tmpTreeOptions.push(_toConsumableArray__default["default"](list));
if (thisValue == null) {
var _list = _slicedToArray__default["default"](list, 1),
firstChild = _list[0];
node = firstChild;
} else {
var child = list.find(function (child2) {
return child2.value === thisValue;
});
node = child !== null && child !== void 0 ? child : list[0];
}
};
while (node && node.children) {
_loop();
}
leafLevel.value = Math.max(0, level);
if (leafLevel.value > treeMaxLevel.value) {
treeMaxLevel.value = leafLevel.value;
}
treeOptions.value = tmpTreeOptions;
if (multiple2) {
var finalValue = innerValue.value;
if (finalValue[treeMaxLevel.value] != null && !Array.isArray(finalValue[treeMaxLevel.value])) {
_common_js_log_log["default"].error("TreeSelect", "`value` should be an array when `multiple` is true, got `".concat(_typeof__default["default"](finalValue[treeMaxLevel.value]), "`"));
}
}
};
var getTreeClass = function getTreeClass(level, total) {
if (level === 0) return "right";
if (level === 1 && level !== total - 1) return "middle";
return "left";
};
var onRootChange = function onRootChange(level) {
setInnerValue(innerValue.value, level);
};
var handleTreeClick = function handleTreeClick(itemValue, level, isDisabled) {
if (isDisabled) return;
innerValue.value[level] = itemValue;
setInnerValue(innerValue.value, level);
};
Vue.watch([innerValue, options, keys, multiple], function () {
buildTreeOptions();
}, {
immediate: true,
deep: true
});
var renderSideBar = function renderSideBar(treeOption) {
var _slot;
return Vue.createVNode(sideBar_index.SideBar, {
"modelValue": innerValue.value[0],
"onUpdate:modelValue": function onUpdateModelValue($event) {
return innerValue.value[0] = $event;
},
"class": "".concat(treeSelectClass.value, "-colum"),
"onChange": function onChange() {
return onRootChange(0);
}
}, _isSlot(_slot = treeOption.map(function (item, index) {
return Vue.createVNode(sideBar_index.SideBarItem, {
"key": index,
"label": item.label,
"value": item.value,
"disabled": item.disabled
}, null);
})) ? _slot : {
default: function _default() {
return [_slot];
}
});
};
var renderMiddleLevel = function renderMiddleLevel(treeOption, level) {
return treeOption.map(function (item) {
return Vue.createVNode("div", {
"key": item.value,
"class": _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(treeSelectClass.value, "__item"), true), "".concat(treeSelectClass.value, "__item--active"), item.value === innerValue.value[level]), "".concat(treeSelectClass.value, "__item--disabled"), item.disabled),
"onClick": function onClick() {
return handleTreeClick(item.value, level, item.disabled);
}
}, [item.label]);
});
};
var renderLeafLevel = function renderLeafLevel(treeOption, level) {
var _slot3;
if (multiple.value) {
var _slot2;
return Vue.createVNode(checkbox_index.CheckboxGroup, {
"modelValue": innerValue.value[level],
"onUpdate:modelValue": function onUpdateModelValue($event) {
return innerValue.value[level] = $event;
},
"class": "".concat(treeSelectClass.value, "__checkbox"),
"onChange": function onChange() {
return onRootChange(level);
}
}, _isSlot(_slot2 = treeOption.map(function (item) {
return Vue.createVNode(checkbox_index.Checkbox, {
"key": item.value,
"class": "".concat(treeSelectClass.value, "__checkbox-item"),
"value": item.value,
"maxLabelRow": 1,
"icon": "line",
"borderless": true,
"placement": "right",
"disabled": item.disabled
}, {
default: function _default() {
return [item.label];
}
});
})) ? _slot2 : {
default: function _default() {
return [_slot2];
}
});
}
return Vue.createVNode(radio_index.RadioGroup, {
"modelValue": innerValue.value[level],
"onUpdate:modelValue": function onUpdateModelValue($event) {
return innerValue.value[level] = $event;
},
"class": "".concat(treeSelectClass.value, "__radio"),
"onChange": function onChange() {
return onRootChange(level);
}
}, _isSlot(_slot3 = treeOption.map(function (item) {
return Vue.createVNode(radio_index.Radio, {
"key": item.value,
"class": "".concat(treeSelectClass.value, "__radio-item"),
"value": item.value,
"icon": "line",
"maxLabelRow": 1,
"borderless": true,
"placement": "right",
"disabled": item.disabled
}, {
default: function _default() {
return [item.label];
}
});
})) ? _slot3 : {
default: function _default() {
return [_slot3];
}
});
};
return function () {
return Vue.createVNode("div", {
"class": treeSelectClass.value,
"style": rootStyle.value
}, [treeOptions.value.map(function (item, level) {
var levelContent;
if (level === 0) {
levelContent = renderSideBar(item);
} else if (level === leafLevel.value && level === treeMaxLevel.value) {
levelContent = renderLeafLevel(item, level);
} else {
levelContent = renderMiddleLevel(item, level);
}
return Vue.createVNode("div", {
"key": level,
"class": ["".concat(treeSelectClass.value, "__column"), "".concat(treeSelectClass.value, "__column--").concat(getTreeClass(leafLevel.value - level, treeOptions.value.length))]
}, [levelContent]);
})]);
};
}
});
exports["default"] = _TreeSelect;
//# sourceMappingURL=tree-select.js.map