tdesign-mobile-vue
Version:
tdesign-mobile-vue
295 lines (287 loc) • 11.3 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 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 _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 treeSelect_props = require('./props.js');
var hooks_useClass = require('../hooks/useClass.js');
var shared_useDefault_index = require('../shared/useDefault/index.js');
var shared_util = require('../shared/util.js');
require('../side-bar/side-bar.js');
require('../side-bar/props.js');
require('../hooks/tnode.js');
require('lodash/isFunction');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isString');
require('lodash/isObject');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('../side-bar/side-bar-item.js');
require('../side-bar/side-bar-item-props.js');
require('../badge/index.js');
require('../badge/badge.js');
require('lodash/isNumber');
require('../badge/props.js');
require('../shared/component.js');
require('../radio/radio.js');
require('tdesign-icons-vue-next');
require('../radio/props.js');
require('../form/hooks.js');
require('lodash/isBoolean');
require('../radio/radio-group.js');
require('../radio/radio-group-props.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('../shared/useChildSlots/index.js');
require('../checkbox/hooks/setCheckAllStatus.js');
require('lodash/intersection');
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 _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,
options = _toRefs.options,
keys = _toRefs.keys,
multiple = _toRefs.multiple;
var _useDefault = shared_useDefault_index.useDefault(props2, context.emit, "value", "change"),
_useDefault2 = _slicedToArray__default["default"](_useDefault, 2),
innerValue = _useDefault2[0],
setInnerValue = _useDefault2[1];
var leafLevel = 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
};
});
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);
treeOptions.value = tmpTreeOptions;
if (multiple2) {
var finalValue = innerValue.value;
if (finalValue[leafLevel.value] != null && !Array.isArray(finalValue[leafLevel.value])) {
throw TypeError("\u5E94\u4F20\u5165\u6570\u7EC4\u7C7B\u578B\u7684 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) {
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