tdesign-mobile-vue
Version:
tdesign-mobile-vue
401 lines (393 loc) • 18.1 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 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('../config-provider/useConfig.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
require('../popup/popup.js');
require('../popup/props.js');
require('../overlay/index.js');
require('../overlay/overlay.js');
require('../shared/dom.js');
require('lodash/isFunction');
require('lodash/isString');
require('../overlay/props.js');
require('../shared/component.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('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('../hooks/useLockScroll.js');
require('../_util/useTouch.js');
require('../_util/getScrollParent.js');
require('../_util/supportsPassive.js');
require('../shared/util.js');
require('lodash/isNumber');
require('../hooks/useTeleport.js');
require('../shared/render-tnode.js');
require('../shared/useDefault/index.js');
require('../tabs/tabs.js');
require('../tabs/props.js');
require('../tabs/tab-nav-item.js');
require('../tabs/tab-panel-props.js');
require('../shared/constants.js');
require('../sticky/index.js');
require('../sticky/sticky.js');
require('@vueuse/core');
require('../sticky/props.js');
require('../badge/index.js');
require('../badge/badge.js');
require('../badge/props.js');
require('../tabs/tab-panel.js');
require('../radio/radio.js');
require('../radio/props.js');
require('../form/hooks.js');
require('lodash/isBoolean');
require('../radio/radio-group.js');
require('../radio/radio-group-props.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, context) {
var _props2$options;
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 = shared_useVModel_index.useVModel(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.reactive([(_props2$options = props2.options) !== null && _props2$options !== void 0 ? _props2$options : []]);
var steps = vue.reactive([placeholder.value]);
var initWithValue = function initWithValue() {
if (cascaderValue.value != null) {
steps.length = 0;
selectedValue.length = 0;
selectedIndexes.splice(0, selectedIndexes.length);
var path = _getIndexesByValue(props2.options, cascaderValue.value);
path === null || path === void 0 || path.forEach(function (e) {
selectedIndexes.push(e);
});
watchSelectedIndexes();
}
};
var watchSelectedIndexes = function watchSelectedIndexes() {
if (props2.options && props2.options.length > 0) {
items.splice.apply(items, [0, items.length].concat([props2.options]));
var keys = props2.keys;
for (var i = 0, size = selectedIndexes.length; i < size; i += 1) {
var _items$i, _keys$value, _keys$label, _keys$children;
var index = selectedIndexes[i];
var next = (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i[index];
selectedValue.push(next[(_keys$value = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value !== void 0 ? _keys$value : "value"]);
steps.push(next[(_keys$label = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label !== void 0 ? _keys$label : "label"]);
if (next[(_keys$children = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children !== void 0 ? _keys$children : "children"]) {
var _keys$children2;
items.push(next[(_keys$children2 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children2 !== void 0 ? _keys$children2 : "children"]);
}
}
}
if (steps.length < items.length) {
steps.push(placeholder.value);
}
stepIndex.value = items.length - 1;
};
var _getIndexesByValue = function getIndexesByValue(options, value2) {
var keys = props2.keys;
for (var i = 0; i < options.length; i++) {
var _keys$value2, _keys$children3;
if (options[i][(_keys$value2 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value2 !== void 0 ? _keys$value2 : "value"] === value2) {
return [i];
}
if (options[i][(_keys$children3 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children3 !== void 0 ? _keys$children3 : "children"]) {
var _keys$children4;
var res = _getIndexesByValue(options[i][(_keys$children4 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children4 !== void 0 ? _keys$children4 : "children"], value2);
if (res) {
return [i].concat(_toConsumableArray__default["default"](res));
}
}
}
};
var chooseSelect = function chooseSelect(value2, level, index, item) {
var _keys$label2, _item, _keys$children5, _item2, _keys$children7;
var keys = props2.keys;
selectedIndexes[level] = index;
selectedIndexes.length = level + 1;
selectedValue[level] = String(value2);
selectedValue.length = level + 1;
steps[level] = item[(_keys$label2 = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label2 !== void 0 ? _keys$label2 : "label"];
if ((_item = item[(_keys$children5 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children5 !== void 0 ? _keys$children5 : "children"]) !== null && _item !== void 0 && _item.length) {
var _keys$children6;
items[level + 1] = item[(_keys$children6 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children6 !== void 0 ? _keys$children6 : "children"];
items.length = level + 2;
stepIndex.value += 1;
steps[level + 1] = placeholder.value;
steps.length = level + 2;
} else if (((_item2 = item[(_keys$children7 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children7 !== void 0 ? _keys$children7 : "children"]) === null || _item2 === void 0 ? void 0 : _item2.length) === 0) {
childrenInfo.value = value2;
childrenInfo.level = level;
} else {
var _keys$value3;
setCascaderValue(item[(_keys$value3 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value3 !== void 0 ? _keys$value3 : "value"], items.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 _item3, _keys$children8, _item4, _keys$children10;
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;
if ((_item3 = item[(_keys$children8 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children8 !== void 0 ? _keys$children8 : "children"]) !== null && _item3 !== void 0 && _item3.length) {
var _keys$children9;
items[level + 1] = item[(_keys$children9 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children9 !== void 0 ? _keys$children9 : "children"];
} else if (((_item4 = item[(_keys$children10 = keys === null || keys === void 0 ? void 0 : keys.children) !== null && _keys$children10 !== void 0 ? _keys$children10 : "children"]) === null || _item4 === void 0 ? void 0 : _item4.length) === 0) {
childrenInfo.value = value2;
childrenInfo.level = level;
}
};
var handleSelect = function handleSelect(value2, level) {
var _props2$onPick, _keys$value5;
var keys = props2.keys;
var index = items[level].findIndex(function (item2) {
var _keys$value4;
return item2[(_keys$value4 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value4 !== void 0 ? _keys$value4 : "value"] === value2;
});
var item = items[level][index];
if (item.disabled) {
return;
}
(_props2$onPick = props2.onPick) === null || _props2$onPick === void 0 || _props2$onPick.call(props2, {
level: level,
value: item[(_keys$value5 = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value5 !== void 0 ? _keys$value5 : "value"],
index: index
});
if (props2.checkStrictly && selectedValue.includes(String(value2))) {
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.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 () {
context.emit("update:visible", open.value);
});
vue.watch(visible, function () {
open.value = visible.value;
if (visible.value) {
initWithValue();
}
});
vue.watch(function () {
return props2.options;
}, function () {
var _props2$options2;
items.splice.apply(items, [0, items.length].concat([(_props2$options2 = props2.options) !== null && _props2$options2 !== void 0 ? _props2$options2 : []]));
if (open.value) {
handleSelect(childrenInfo.value, childrenInfo.level);
}
}, {
deep: true
});
vue.watch(placeholder, function (newValue, oldValue) {
var index = steps.indexOf(oldValue);
if (index !== -1) {
steps[index] = newValue;
}
});
vue.onMounted(function () {
initWithValue();
});
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, {
"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]), vue.createVNode("div", {
"class": "".concat(cascaderClass.value, "__content")
}, [readerSteps(), 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.length + 1, "00vw; transform: translateX(-").concat(stepIndex.value, "00vw);")
}, [items.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, context2) {
handleSelect(value2, index);
}
}, null)])];
}
})]);
})])])])];
}
});
};
}
});
exports["default"] = _Cascader;
//# sourceMappingURL=cascader.js.map