tdesign-mobile-vue
Version:
tdesign-mobile-vue
285 lines (281 loc) • 10.4 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, toRefs, ref, computed, watch, createVNode, isVNode } from 'vue';
import { SideBar, SideBarItem } from '../side-bar/index.js';
import { Radio, RadioGroup } from '../radio/index.js';
import { CheckboxGroup, Checkbox } from '../checkbox/index.js';
import config from '../config.js';
import props from './props.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useDefault } from '../shared/useDefault/index.js';
import { convertUnit } from '../shared/util.js';
import '../side-bar/side-bar.js';
import '../side-bar/props.js';
import '../hooks/tnode.js';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isString';
import 'lodash/isObject';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import '../side-bar/side-bar-item.js';
import '../side-bar/side-bar-item-props.js';
import '../badge/index.js';
import '../badge/badge.js';
import 'lodash/isNumber';
import '../badge/props.js';
import '../shared/component.js';
import '../radio/radio.js';
import 'tdesign-icons-vue-next';
import '../radio/props.js';
import '../form/hooks.js';
import 'lodash/isBoolean';
import '../radio/radio-group.js';
import '../radio/radio-group-props.js';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../shared/render-tnode.js';
import '../checkbox/checkbox-group.js';
import '../checkbox/checkbox-group-props.js';
import '../checkbox/hooks/getOptions.js';
import '../shared/useChildSlots/index.js';
import '../checkbox/hooks/setCheckAllStatus.js';
import 'lodash/intersection';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var prefix = config.prefix;
var _TreeSelect = defineComponent({
name: "".concat(prefix, "-tree-select"),
components: {
TSideBar: SideBar,
TSideBarItem: SideBarItem,
TRadio: Radio,
TRadioGroup: RadioGroup
},
props: props,
emits: ["update:value", "update:modelValue", "change"],
setup: function setup(props2, context) {
var treeSelectClass = usePrefixClass("tree-select");
var _toRefs = toRefs(props2),
height = _toRefs.height,
customStyle = _toRefs.customStyle,
value = _toRefs.value,
options = _toRefs.options,
keys = _toRefs.keys,
multiple = _toRefs.multiple;
var _useDefault = useDefault(props2, context.emit, "value", "change"),
_useDefault2 = _slicedToArray(_useDefault, 2),
innerValue = _useDefault2[0],
setInnerValue = _useDefault2[1];
var leafLevel = ref(0);
var treeOptions = ref([]);
var rootStyle = computed(function () {
return ["height: ".concat(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(list));
if (thisValue == null) {
var _list = _slicedToArray(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);
};
watch([innerValue, options, keys, multiple], function () {
buildTreeOptions();
}, {
immediate: true,
deep: true
});
var renderSideBar = function renderSideBar(treeOption) {
var _slot;
return createVNode(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 createVNode(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 createVNode("div", {
"key": item.value,
"class": _defineProperty(_defineProperty(_defineProperty({}, "".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 createVNode(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 createVNode(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 createVNode(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 createVNode(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 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 createVNode("div", {
"key": level,
"class": ["".concat(treeSelectClass.value, "__column"), "".concat(treeSelectClass.value, "__column--").concat(getTreeClass(leafLevel.value - level, treeOptions.value.length))]
}, [levelContent]);
})]);
};
}
});
export { _TreeSelect as default };
//# sourceMappingURL=tree-select.js.map