tdesign-mobile-vue
Version:
tdesign-mobile-vue
419 lines (415 loc) • 17.9 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 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, reactive, watch, onMounted, createVNode, Transition, toRaw } from 'vue';
import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
import { get } from 'lodash-es';
import { Popup } from '../popup/index.js';
import { Tabs } from '../tabs/index.js';
import { RadioGroup } from '../radio/index.js';
import config from '../config.js';
import props from './props.js';
import { useConfig } from '../config-provider/useConfig.js';
import useVModel from '../hooks/useVModel.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import '../popup/popup.js';
import '../popup/props.js';
import '../overlay/index.js';
import '../overlay/overlay.js';
import '../shared/dom.js';
import '../overlay/props.js';
import '../shared/component.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-4412ff17.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-8e82f508.js';
import 'dayjs';
import '../hooks/render-tnode.js';
import '../_common/js/utils/general.js';
import '../hooks/useLockScroll.js';
import '../_util/useTouch.js';
import '../_util/getScrollParent.js';
import '../hooks/useTeleport.js';
import '../shared/render-tnode.js';
import '../shared/util.js';
import '../tabs/tabs.js';
import '../tabs/props.js';
import '../tabs/tab-nav-item.js';
import '../tabs/tab-panel-props.js';
import '../sticky/index.js';
import '../sticky/sticky.js';
import '@vueuse/core';
import '../sticky/props.js';
import '../hooks/useElementRect.js';
import '../badge/index.js';
import '../badge/badge.js';
import '../badge/props.js';
import '../hooks/useCommonClassName.js';
import '../tabs/tab-panel.js';
import '../radio/radio.js';
import '../radio/props.js';
import '../form/hooks.js';
import '../radio/radio-group.js';
import '../radio/radio-group-props.js';
var prefix = config.prefix;
var name = "".concat(prefix, "-cascader");
var childrenInfo = {
value: "",
level: 0
};
var _Cascader = defineComponent({
name: name,
props: props,
emits: ["update:visible", "update:value", "update:modelValue"],
setup: function setup(props2, _ref) {
var emit = _ref.emit,
expose = _ref.expose;
var renderTNodeJSX = useTNodeJSX();
var cascaderClass = usePrefixClass("cascader");
var _useConfig = useConfig("cascader"),
globalConfig = _useConfig.globalConfig;
var _toRefs = toRefs(props2),
visible = _toRefs.visible,
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
cascaderValue = _useVModel2[0],
setCascaderValue = _useVModel2[1];
var open = ref(visible.value || false);
var placeholder = computed(function () {
return props2.placeholder || globalConfig.value.placeholder;
});
var stepIndex = ref(0);
var selectedIndexes = reactive([]);
var selectedValue = reactive([]);
var items = computed(function () {
var _props2$options;
return [(_props2$options = props2.options) !== null && _props2$options !== void 0 ? _props2$options : []];
});
var steps = reactive([placeholder.value]);
var initWithValue = function initWithValue() {
var _props2$options2;
steps.length = 0;
selectedValue.length = 0;
selectedIndexes.splice(0, selectedIndexes.length);
items.value.splice(0, items.value.length, (_props2$options2 = props2.options) !== null && _props2$options2 !== void 0 ? _props2$options2 : []);
if (cascaderValue.value != null) {
var path = _getIndexesByValue(props2.options, cascaderValue.value);
path === null || path === void 0 || path.forEach(function (e) {
selectedIndexes.push(e);
});
watchSelectedIndexes();
} else {
steps.push(placeholder.value);
stepIndex.value = 0;
}
};
var watchSelectedIndexes = function watchSelectedIndexes() {
if (props2.options && props2.options.length > 0) {
var _items$value;
(_items$value = items.value).splice.apply(_items$value, [0, items.value.length].concat([props2.options]));
var keys = props2.keys;
for (var i = 0, size = selectedIndexes.length; i < size; i += 1) {
var _items$value$i, _keys$value, _keys$label, _keys$children;
var index = selectedIndexes[i];
var next = (_items$value$i = items.value[i]) === null || _items$value$i === void 0 ? void 0 : _items$value$i[index];
selectedValue.push(get(next, (_keys$value = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value !== void 0 ? _keys$value : "value"));
steps.push(get(next, (_keys$label = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label !== void 0 ? _keys$label : "label"));
var children = get(next, (_keys$children = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children !== void 0 ? _keys$children : "children");
if (Array.isArray(children) && children.length > 0) {
items.value.push(children);
}
}
}
if (steps.length < items.value.length) {
steps.push(placeholder.value);
}
stepIndex.value = items.value.length - 1;
};
var _getIndexesByValue = function getIndexesByValue(options, value2) {
var keys = props2.keys;
for (var i = 0; i < options.length; i++) {
var _keys$value2, _keys$children2;
if (get(options[i], (_keys$value2 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value2 !== void 0 ? _keys$value2 : "value") === value2) {
return [i];
}
var children = get(options[i], (_keys$children2 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children2 !== void 0 ? _keys$children2 : "children");
if (Array.isArray(children) && children.length > 0) {
var res = _getIndexesByValue(children, value2);
if (res) {
return [i].concat(_toConsumableArray(res));
}
}
}
};
var chooseSelect = function chooseSelect(value2, level, index, item) {
var _keys$label2, _keys$children3;
var keys = props2.keys;
selectedIndexes[level] = index;
selectedIndexes.length = level + 1;
selectedValue[level] = typeof value2 === "number" ? value2 : String(value2);
selectedValue.length = level + 1;
steps[level] = get(item, (_keys$label2 = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label2 !== void 0 ? _keys$label2 : "label");
var children = get(item, (_keys$children3 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children3 !== void 0 ? _keys$children3 : "children");
if (children === true && props2.load) {
var _keys$value3, _keys$label3;
var nodeModel = {
data: item,
value: get(item, (_keys$value3 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value3 !== void 0 ? _keys$value3 : "value"),
label: get(item, (_keys$label3 = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label3 !== void 0 ? _keys$label3 : "label")
};
props2.load(nodeModel).then(function (loadedChildren) {
items.value[level + 1] = loadedChildren;
items.value.length = level + 2;
stepIndex.value += 1;
steps[level + 1] = placeholder.value;
steps.length = level + 2;
}).catch(function (error) {
console.error("Load children failed:", error);
});
} else if (Array.isArray(children) && children.length > 0) {
items.value[level + 1] = children;
items.value.length = level + 2;
stepIndex.value += 1;
steps[level + 1] = placeholder.value;
steps.length = level + 2;
} else {
var _keys$value4;
items.value.length = level + 1;
steps.length = level + 1;
stepIndex.value = level;
setCascaderValue(get(item, (_keys$value4 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value4 !== void 0 ? _keys$value4 : "value"), items.value.map(function (item2, index2) {
return toRaw(item2 === null || item2 === void 0 ? void 0 : item2[selectedIndexes[index2]]);
}));
close("finish");
}
};
var cancelSelect = function cancelSelect(value2, level, index, item) {
var _keys$children4;
var keys = props2.keys;
selectedIndexes[level] = index;
selectedIndexes.length = level;
selectedValue.length = level;
steps[level] = String(placeholder.value);
steps[level + 1] = placeholder.value;
steps.length = level + 1;
var children = get(item, (_keys$children4 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children4 !== void 0 ? _keys$children4 : "children");
if (Array.isArray(children) && children.length > 0) {
items.value[level + 1] = children;
}
};
var handleSelect = function handleSelect(value2, level) {
var _keys$disabled;
var fromHandler = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var keys = props2.keys;
var index = items.value[level].findIndex(function (item2) {
var _keys$value5;
return get(item2, (_keys$value5 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value5 !== void 0 ? _keys$value5 : "value") === value2;
});
var item = items.value[level][index];
if (get(item, (_keys$disabled = keys === null || keys === void 0 ? void 0 : keys.disabled) !== null && _keys$disabled !== void 0 ? _keys$disabled : "disabled")) {
return;
}
if (fromHandler) {
var _props2$onPick, _keys$value6, _keys$label4;
(_props2$onPick = props2.onPick) === null || _props2$onPick === void 0 || _props2$onPick.call(props2, {
value: get(item, (_keys$value6 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value6 !== void 0 ? _keys$value6 : "value"),
label: get(item, (_keys$label4 = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label4 !== void 0 ? _keys$label4 : "label"),
level: level,
index: index
});
}
if (props2.checkStrictly && selectedValue.includes(String(value2)) && fromHandler) {
cancelSelect(value2, level, index, item);
} else {
chooseSelect(value2, level, index, item);
}
};
var close = function close(trigger) {
var _props2$onClose;
(_props2$onClose = props2.onClose) === null || _props2$onClose === void 0 || _props2$onClose.call(props2, trigger);
};
var handleVisibleChange = function handleVisibleChange(visible2, e) {
if ((e === null || e === void 0 ? void 0 : e.trigger) !== "overlay") return;
close("overlay");
};
var updateCascaderValue = function updateCascaderValue() {
setCascaderValue(selectedValue[selectedValue.length - 1], items.value.filter(function (item, index) {
return !!item && selectedIndexes.length > index;
}).map(function (item, index) {
return toRaw(item === null || item === void 0 ? void 0 : item[selectedIndexes[index]]);
}));
};
var onClose = function onClose() {
open.value = false;
close("close-btn");
};
var onCloseBtn = function onCloseBtn() {
if (props2.checkStrictly) {
updateCascaderValue();
onClose();
} else {
onClose();
}
};
var onStepClick = function onStepClick(index) {
stepIndex.value = index;
};
var onTabChange = function onTabChange(value2) {
stepIndex.value = Number(value2);
};
watch(open, function () {
emit("update:visible", open.value);
});
watch(visible, function () {
open.value = visible.value;
if (visible.value) {
initWithValue();
}
});
watch(function () {
return props2.options;
}, function () {
initWithValue();
if (open.value && cascaderValue.value) {
handleSelect(childrenInfo.value, childrenInfo.level, false);
}
}, {
deep: true
});
watch(placeholder, function (newValue, oldValue) {
var index = steps.indexOf(oldValue);
if (index !== -1) {
steps[index] = newValue;
}
});
watch(cascaderValue, function () {
initWithValue();
}, {
deep: true
});
onMounted(function () {
initWithValue();
});
var reset = function reset() {
setCascaderValue(void 0, []);
};
expose({
reset: reset
});
return function () {
var title = renderTNodeJSX("title") || globalConfig.value.title;
var closeBtn = renderTNodeJSX("closeBtn", {
defaultNode: createVNode(CloseIcon, {
"size": "24px"
}, null)
});
var PlaceholderNode = renderTNodeJSX("placeholder");
var readerStep = function readerStep() {
return createVNode("div", {
"class": "".concat(cascaderClass.value, "__steps")
}, [steps.map(function (step, index) {
return createVNode("div", {
"class": "".concat(cascaderClass.value, "__step"),
"onClick": function onClick() {
onStepClick(index);
}
}, [createVNode("div", {
"class": ["".concat(cascaderClass.value, "__step-dot"), _defineProperty(_defineProperty({}, "".concat(cascaderClass.value, "__step-dot--active"), step !== placeholder.value), "".concat(cascaderClass.value, "__step-dot--last"), index === steps.length - 1)]
}, null), createVNode("div", {
"class": ["".concat(cascaderClass.value, "__step-label"), _defineProperty({}, "".concat(cascaderClass.value, "__step-label--active"), index === stepIndex.value)]
}, [PlaceholderNode && !(typeof PlaceholderNode === "string") && step === placeholder.value ? PlaceholderNode : step]), createVNode(ChevronRightIcon, {
"class": "".concat(cascaderClass.value, "__step-arrow"),
"size": "22"
}, null)]);
})]);
};
var renderTabStep = function renderTabStep() {
var _steps = steps.map(function (item, index) {
return {
value: index,
label: item
};
});
return createVNode(Tabs, {
"value": stepIndex.value,
"spaceEvenly": false,
"list": _steps,
"onChange": onTabChange
}, null);
};
var readerSteps = function readerSteps() {
if (steps.length === 0) {
return null;
}
if (props2.theme === "step") {
return readerStep();
}
if (open.value && props2.theme === "tab") {
return renderTabStep();
}
};
return createVNode(Popup, {
"overlayProps": props2.overlayProps,
"modelValue": open.value,
"onUpdate:modelValue": function onUpdateModelValue($event) {
return open.value = $event;
},
"placement": "bottom",
"onVisibleChange": handleVisibleChange
}, {
default: function _default() {
return [createVNode("div", {
"class": "".concat(cascaderClass.value)
}, [createVNode("div", {
"class": "".concat(cascaderClass.value, "__title")
}, [title]), createVNode("div", {
"class": "".concat(cascaderClass.value, "__close-btn"),
"onClick": onCloseBtn
}, [closeBtn]), renderTNodeJSX("header"), createVNode("div", {
"class": "".concat(cascaderClass.value, "__content")
}, [readerSteps(), renderTNodeJSX("middleContent"), props2.subTitles && props2.subTitles[stepIndex.value] && createVNode("div", {
"class": "".concat(cascaderClass.value, "__options-title")
}, [props2.subTitles[stepIndex.value]]), createVNode("div", {
"class": "".concat(cascaderClass.value, "__options-container"),
"style": "width: ".concat(items.value.length + 1, "00vw; transform: translateX(-").concat(stepIndex.value, "00vw);")
}, [items.value.map(function (options, index) {
return createVNode("div", {
"class": "".concat(cascaderClass.value, "__options")
}, [createVNode(Transition, {
"appear": true,
"name": "slide"
}, {
default: function _default() {
return [createVNode("div", {
"class": "".concat(cascaderClass.value, "-radio-group-").concat(index)
}, [createVNode(RadioGroup, {
"value": selectedValue[index] || "",
"keys": props2.keys,
"options": options,
"placement": "right",
"icon": "line",
"borderless": true,
"onChange": function onChange(value2, context) {
handleSelect(value2, index);
}
}, null)])];
}
})]);
})])])])];
}
});
};
}
});
export { _Cascader as default };
//# sourceMappingURL=cascader.js.map