tdesign-mobile-vue
Version:
tdesign-mobile-vue
421 lines (417 loc) • 18.2 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, reactive, toRaw, watch, onMounted, createVNode, Transition } from 'vue';
import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
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 '../shared/index.js';
import { useConfig } from '../config-provider/useConfig.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useVModel } from '../shared/useVModel/index.js';
import '../popup/popup.js';
import '../popup/props.js';
import '../overlay/index.js';
import '../overlay/overlay.js';
import '../shared/dom.js';
import 'lodash/isFunction';
import 'lodash/isString';
import '../overlay/props.js';
import '../overlay/style';
import '../shared/component.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-6c582337.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-38637d40.js';
import 'dayjs';
import '../_chunks/dep-959cdc59.js';
import '../config-provider/type.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import '../shared/functions.js';
import '../shared/util.js';
import 'lodash/isNumber';
import '../shared/constants.js';
import '../shared/render.js';
import '../shared/render-tnode.js';
import '../shared/useToggle/index.js';
import '../shared/useCountDown/index.js';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import '@vueuse/core';
import '../shared/useCountDown/utils.js';
import '../shared/useDefault/index.js';
import '../shared/useChildSlots/index.js';
import '../shared/useTouch/index.js';
import '../shared/useScrollParent/index.js';
import '../shared/useExpose/index.js';
import '../shared/useTest/index.js';
import '../shared/useClickAway/index.js';
import '../shared/useGesture/index.js';
import '@use-gesture/vanilla';
import '../shared/hover.js';
import '../hooks/useLockScroll.js';
import '../_util/useTouch.js';
import '../_util/getScrollParent.js';
import '../_util/supportsPassive.js';
import '../hooks/useTeleport.js';
import '../popup/style';
import '../popup/type.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 '../sticky/props.js';
import '../sticky/style';
import '../sticky/type.js';
import '../badge/index.js';
import '../badge/badge.js';
import '../badge/props.js';
import '../badge/style';
import '../badge/type.js';
import '../tabs/tab-panel.js';
import '../tabs/style';
import '../tabs/type.js';
import '../radio/radio.js';
import '../radio/props.js';
import '../form/hooks.js';
import 'lodash/isBoolean';
import '../radio/radio-group.js';
import '../radio/radio-group-props.js';
import '../radio/style';
import '../radio/type.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, context) {
var _props2$options;
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 = reactive([(_props2$options = props2.options) !== null && _props2$options !== void 0 ? _props2$options : []]);
var steps = 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(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 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 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 () {
context.emit("update:visible", open.value);
});
watch(visible, function () {
open.value = visible.value;
if (visible.value) {
initWithValue();
}
});
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
});
watch(placeholder, function (newValue, oldValue) {
var index = steps.indexOf(oldValue);
if (index !== -1) {
steps[index] = newValue;
}
});
onMounted(function () {
initWithValue();
});
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, {
"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]), createVNode("div", {
"class": "".concat(cascaderClass.value, "__content")
}, [readerSteps(), 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.length + 1, "00vw; transform: translateX(-").concat(stepIndex.value, "00vw);")
}, [items.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, context2) {
handleSelect(value2, index);
}
}, null)])];
}
})]);
})])])])];
}
});
};
}
});
export { _Cascader as default };
//# sourceMappingURL=cascader.js.map