tdesign-mobile-vue
Version:
tdesign-mobile-vue
463 lines (455 loc) • 20.2 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
'use strict';
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 tdesignIconsVueNext = require('tdesign-icons-vue-next');
var popup_index = require('../popup/index.js');
var tabs_index = require('../tabs/index.js');
var radio_index = require('../radio/index.js');
var config = require('../config.js');
var cascader_props = require('./props.js');
var configProvider_useConfig = require('../_chunks/dep-ede0b0a5.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var get = require('../_chunks/dep-a316fb34.js');
require('../popup/popup.js');
require('../popup/props.js');
require('../overlay/index.js');
require('../overlay/overlay.js');
require('../shared/dom.js');
require('../_chunks/dep-abe9931d.js');
require('../_chunks/dep-d16bf091.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-c041cd95.js');
require('../_chunks/dep-db763263.js');
require('../_chunks/dep-c6554877.js');
require('../_chunks/dep-a8725fec.js');
require('../overlay/props.js');
require('../shared/component.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-082c7326.js');
require('../_chunks/dep-591548d1.js');
require('../_chunks/dep-a9fd9906.js');
require('../_chunks/dep-a837a88d.js');
require('../_chunks/dep-d2416277.js');
require('../_chunks/dep-4a0acbaa.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('../_chunks/dep-a1831458.js');
require('../hooks/render-tnode.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-671f1b66.js');
require('../_common/js/utils/general.js');
require('../hooks/useLockScroll.js');
require('../_util/useTouch.js');
require('../_util/getScrollParent.js');
require('../hooks/useTeleport.js');
require('../shared/render-tnode.js');
require('../shared/util.js');
require('../_chunks/dep-dea6ba04.js');
require('../tabs/tabs.js');
require('../tabs/props.js');
require('../tabs/tab-nav-item.js');
require('../tabs/tab-panel-props.js');
require('../sticky/index.js');
require('../sticky/sticky.js');
require('@vueuse/core');
require('../sticky/props.js');
require('../hooks/useElementRect.js');
require('../badge/index.js');
require('../badge/badge.js');
require('../badge/props.js');
require('../hooks/useCommonClassName.js');
require('../tabs/tab-panel.js');
require('../radio/radio.js');
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-d8e3a669.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 _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var prefix = config["default"].prefix;
var name = "".concat(prefix, "-cascader");
var childrenInfo = {
value: "",
level: 0
};
var _Cascader = Vue.defineComponent({
name: name,
props: cascader_props["default"],
emits: ["update:visible", "update:value", "update:modelValue"],
setup: function setup(props2, _ref) {
var emit = _ref.emit,
expose = _ref.expose;
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var cascaderClass = hooks_useClass.usePrefixClass("cascader");
var _useConfig = configProvider_useConfig.useConfig("cascader"),
globalConfig = _useConfig.globalConfig;
var _toRefs = Vue.toRefs(props2),
visible = _toRefs.visible,
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
cascaderValue = _useVModel2[0],
setCascaderValue = _useVModel2[1];
var open = Vue.ref(visible.value || false);
var placeholder = Vue.computed(function () {
return props2.placeholder || globalConfig.value.placeholder;
});
var stepIndex = Vue.ref(0);
var selectedIndexes = Vue.reactive([]);
var selectedValue = Vue.reactive([]);
var items = Vue.computed(function () {
var _props2$options;
return [(_props2$options = props2.options) !== null && _props2$options !== void 0 ? _props2$options : []];
});
var steps = Vue.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.get(next, (_keys$value = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value !== void 0 ? _keys$value : "value"));
steps.push(get.get(next, (_keys$label = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label !== void 0 ? _keys$label : "label"));
var children = get.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.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.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__default["default"](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.get(item, (_keys$label2 = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label2 !== void 0 ? _keys$label2 : "label");
var children = get.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.get(item, (_keys$value3 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value3 !== void 0 ? _keys$value3 : "value"),
label: get.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.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 Vue.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.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.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.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.get(item, (_keys$value6 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value6 !== void 0 ? _keys$value6 : "value"),
label: get.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 Vue.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);
};
Vue.watch(open, function () {
emit("update:visible", open.value);
});
Vue.watch(visible, function () {
open.value = visible.value;
if (visible.value) {
initWithValue();
}
});
Vue.watch(function () {
return props2.options;
}, function () {
initWithValue();
if (open.value && cascaderValue.value) {
handleSelect(childrenInfo.value, childrenInfo.level, false);
}
}, {
deep: true
});
Vue.watch(placeholder, function (newValue, oldValue) {
var index = steps.indexOf(oldValue);
if (index !== -1) {
steps[index] = newValue;
}
});
Vue.watch(cascaderValue, function () {
initWithValue();
}, {
deep: true
});
Vue.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: Vue.createVNode(tdesignIconsVueNext.CloseIcon, {
"size": "24px"
}, null)
});
var PlaceholderNode = renderTNodeJSX("placeholder");
var readerStep = function readerStep() {
return Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__steps")
}, [steps.map(function (step, index) {
return Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__step"),
"onClick": function onClick() {
onStepClick(index);
}
}, [Vue.createVNode("div", {
"class": ["".concat(cascaderClass.value, "__step-dot"), _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(cascaderClass.value, "__step-dot--active"), step !== placeholder.value), "".concat(cascaderClass.value, "__step-dot--last"), index === steps.length - 1)]
}, null), Vue.createVNode("div", {
"class": ["".concat(cascaderClass.value, "__step-label"), _defineProperty__default["default"]({}, "".concat(cascaderClass.value, "__step-label--active"), index === stepIndex.value)]
}, [PlaceholderNode && !(typeof PlaceholderNode === "string") && step === placeholder.value ? PlaceholderNode : step]), Vue.createVNode(tdesignIconsVueNext.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 Vue.createVNode(tabs_index.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 Vue.createVNode(popup_index.Popup, {
"overlayProps": props2.overlayProps,
"modelValue": open.value,
"onUpdate:modelValue": function onUpdateModelValue($event) {
return open.value = $event;
},
"placement": "bottom",
"onVisibleChange": handleVisibleChange
}, {
default: function _default() {
return [Vue.createVNode("div", {
"class": "".concat(cascaderClass.value)
}, [Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__title")
}, [title]), Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__close-btn"),
"onClick": onCloseBtn
}, [closeBtn]), renderTNodeJSX("header"), Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__content")
}, [readerSteps(), renderTNodeJSX("middleContent"), props2.subTitles && props2.subTitles[stepIndex.value] && Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__options-title")
}, [props2.subTitles[stepIndex.value]]), Vue.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 Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__options")
}, [Vue.createVNode(Vue.Transition, {
"appear": true,
"name": "slide"
}, {
default: function _default() {
return [Vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "-radio-group-").concat(index)
}, [Vue.createVNode(radio_index.RadioGroup, {
"value": selectedValue[index] || "",
"keys": props2.keys,
"options": options,
"placement": "right",
"icon": "line",
"borderless": true,
"onChange": function onChange(value2, context) {
handleSelect(value2, index);
}
}, null)])];
}
})]);
})])])])];
}
});
};
}
});
exports["default"] = _Cascader;
//# sourceMappingURL=cascader.js.map