tdesign-mobile-vue
Version:
tdesign-mobile-vue
408 lines (400 loc) • 17.1 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var radio_index = require('../radio/index.js');
var config = require('../config.js');
var button_index = require('../button/index.js');
var popup_index = require('../popup/index.js');
var checkbox_index = require('../checkbox/index.js');
var dropdownMenu_dropdownItemProps = require('./dropdown-item-props.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
var shared_dom = require('../shared/dom.js');
var shared_util = require('../shared/util.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
require('../radio/radio.js');
require('tdesign-icons-vue-next');
require('../radio/props.js');
require('../form/hooks.js');
require('lodash/isBoolean');
require('../shared/useDefault/index.js');
require('lodash/camelCase');
require('lodash/isFunction');
require('lodash/cloneDeep');
require('lodash/isString');
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/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('../radio/radio-group.js');
require('../radio/radio-group-props.js');
require('../shared/component.js');
require('../button/button.js');
require('../loading/index.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/set-style.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('../loading/plugin.js');
require('../button/props.js');
require('../shared/hover.js');
require('../popup/popup.js');
require('../popup/props.js');
require('../overlay/index.js');
require('../overlay/overlay.js');
require('../overlay/props.js');
require('../hooks/useLockScroll.js');
require('../_util/useTouch.js');
require('../_util/getScrollParent.js');
require('../_util/supportsPassive.js');
require('../hooks/useTeleport.js');
require('../shared/render-tnode.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../checkbox/checkbox-group.js');
require('../checkbox/checkbox-group-props.js');
require('../checkbox/hooks/getOptions.js');
require('../shared/useChildSlots/index.js');
require('../checkbox/hooks/setCheckAllStatus.js');
require('lodash/intersection');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var prefix = config["default"].prefix;
var getUniqueID = shared_util.uniqueFactory("dropdown-popup");
var _DropdownItem = vue.defineComponent({
name: "".concat(prefix, "-dropdown-item"),
components: {
TPopup: popup_index.Popup
},
props: dropdownMenu_dropdownItemProps["default"],
emits: ["change", "open", "opened", "close", "closed", "update:value", "update:modelValue"],
setup: function setup(props2) {
var dropdownItemClass = hooks_useClass.usePrefixClass("dropdown-item");
var _useConfig = configProvider_useConfig.useConfig("dropdownMenu"),
globalConfig = _useConfig.globalConfig;
var renderContent = hooks_tnode.useContent();
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var popupContent = vue.ref(null);
var _toRefs = vue.toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = shared_useVModel_index.useVModel(value, modelValue, props2.defaultValue),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
passInValue = _useVModel2[0],
setValue = _useVModel2[1];
var menuProps = vue.inject("dropdownMenuProps");
var menuState = vue.inject("dropdownMenuState");
var _inject = vue.inject("dropdownMenuControl");
_inject.expandMenu;
var collapseMenu = _inject.collapseMenu,
emitEvents = _inject.emitEvents;
var classes = vue.computed(function () {
return ["".concat(dropdownItemClass.value)];
});
var itemId = vue.ref(0);
vue.onBeforeMount(function () {
itemId.value = menuState.childCount;
menuState.childCount += 1;
});
var state = vue.reactive({
showOverlay: vue.computed(function () {
return menuProps.showOverlay;
}),
duration: vue.computed(function () {
return menuProps.duration;
}),
isShowItems: false,
wrapperVisible: false,
expandStyle: {},
multiple: vue.computed(function () {
return props2.multiple;
}),
options: vue.computed(function () {
if (props2.keys) {
var _props2$options;
return (_props2$options = props2.options) === null || _props2$options === void 0 ? void 0 : _props2$options.map(function (item) {
var _props2$keys$value, _props2$keys, _props2$keys$label, _props2$keys2;
return {
value: item[(_props2$keys$value = (_props2$keys = props2.keys) === null || _props2$keys === void 0 ? void 0 : _props2$keys.value) !== null && _props2$keys$value !== void 0 ? _props2$keys$value : "value"],
label: item[(_props2$keys$label = (_props2$keys2 = props2.keys) === null || _props2$keys2 === void 0 ? void 0 : _props2$keys2.label) !== null && _props2$keys$label !== void 0 ? _props2$keys$label : "label"],
disabled: item.disabled
};
});
}
return props2.options;
})
});
var isCheckedRadio = function isCheckedRadio(value2) {
return value2 === radioSelect.value;
};
var styleDropRadio = function styleDropRadio(value2) {
return ["".concat(dropdownItemClass.value, "__radio-item"), _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(prefix, "-is-tick"), !props2.multiple), "".concat(prefix, "-is-checked"), isCheckedRadio(value2))];
};
var popupStyle = vue.computed(function () {
return {
zIndex: menuProps.zIndex && menuProps.zIndex + 1,
position: "absolute",
overflow: "hidden"
};
});
var popupId = getUniqueID();
var setExpand = function setExpand(val) {
var _props;
var _menuState$barRect = menuState.barRect,
bottom = _menuState$barRect.bottom,
top = _menuState$barRect.top;
var winHeight = shared_dom.getWindowSize().height;
menuProps.direction === "up" ? state.expandStyle = {
zIndex: menuProps.zIndex,
bottom: "".concat(winHeight - top, "px")
} : state.expandStyle = {
zIndex: menuProps.zIndex,
top: "".concat(bottom, "px")
};
var duration2 = menuProps.duration;
(_props = props2["on".concat(val ? "Open" : "Close")]) === null || _props === void 0 || _props.call(props2);
if (val) {
state.wrapperVisible = true;
}
vue.nextTick(function () {
state.isShowItems = val;
});
if (!val) {
setTimeout(function () {
state.wrapperVisible = false;
}, Number(duration2));
}
setTimeout(function () {
var _props2;
(_props2 = props2["on".concat(val ? "Opened" : "Closed")]) === null || _props2 === void 0 || _props2.call(props2);
}, Number(duration2));
};
vue.watch(function () {
return menuState.activeId === itemId.value;
}, function (val) {
return setExpand(val);
});
var radioSelect = vue.ref();
var checkSelect = vue.ref();
var updateSelectValue = function updateSelectValue(val) {
if (!props2.multiple) {
var _ref2;
var list = state.options;
var firstChild = list === null || list === void 0 ? void 0 : list[0];
var newValue = (_ref2 = val !== null && val !== void 0 ? val : firstChild === null || firstChild === void 0 ? void 0 : firstChild.value) !== null && _ref2 !== void 0 ? _ref2 : null;
radioSelect.value = newValue;
} else if (props2.multiple) {
checkSelect.value = val !== null && val !== void 0 ? val : [];
}
};
updateSelectValue(passInValue.value || null);
vue.watch(function () {
return passInValue.value;
}, function (val) {
if (!val) return;
updateSelectValue(val);
});
var isBtnDisabled = vue.computed(function () {
return Array.isArray(checkSelect.value) && checkSelect.value.length <= 0;
});
var resetSelect = function resetSelect() {
var _props2$onReset;
checkSelect.value = [];
var values = checkSelect.value;
values = JSON.parse(JSON.stringify(values));
(_props2$onReset = props2.onReset) === null || _props2$onReset === void 0 || _props2$onReset.call(props2, values);
};
var confirmSelect = function confirmSelect() {
var _props2$onConfirm;
var values = checkSelect.value;
values = JSON.parse(JSON.stringify(values));
(_props2$onConfirm = props2.onConfirm) === null || _props2$onConfirm === void 0 || _props2$onConfirm.call(props2, values);
setValue(values);
collapseMenu();
emitEvents("menuClosed", "confirm");
};
vue.watch(checkSelect, function (val) {
if (!props2.multiple) return;
if (!state.isShowItems) return;
if (val) {
var _props2$onChange;
var value2 = JSON.stringify(passInValue.value || []);
var values = JSON.stringify(val);
if (value2 === values) return;
(_props2$onChange = props2.onChange) === null || _props2$onChange === void 0 || _props2$onChange.call(props2, JSON.parse(values));
}
});
vue.watch(radioSelect, function (val) {
var _props2$onChange2;
if (menuState.activeId !== null) {
var _state$options;
var target = (_state$options = state.options) === null || _state$options === void 0 ? void 0 : _state$options.find(function (item) {
return item.value === val;
});
menuState.itemsLabel[menuState.activeId] = target === null || target === void 0 ? void 0 : target.label;
}
if (props2.multiple) return;
if (!state.isShowItems) return;
var value2 = passInValue.value || [];
if (value2[0] === val) return;
(_props2$onChange2 = props2.onChange) === null || _props2$onChange2 === void 0 || _props2$onChange2.call(props2, val);
setValue(val);
collapseMenu();
emitEvents("menuClosed", "content");
});
var onVisibleChange = function onVisibleChange(visible) {
if (menuProps.closeOnClickOverlay && !visible) {
collapseMenu();
emitEvents("menuClosed", "overlay");
}
};
var _toRefs2 = vue.toRefs(state),
showOverlay = _toRefs2.showOverlay,
duration = _toRefs2.duration,
isShowItems = _toRefs2.isShowItems,
wrapperVisible = _toRefs2.wrapperVisible,
expandStyle = _toRefs2.expandStyle,
multiple = _toRefs2.multiple,
options = _toRefs2.options;
return function () {
var handleRadioChange = function handleRadioChange(value2) {
radioSelect.value = value2;
};
var handleCheckboxChange = function handleCheckboxChange(value2) {
checkSelect.value = value2;
};
var defaultSlot = function defaultSlot() {
var _slot2;
if (!multiple.value) {
var _slot;
return vue.createVNode(radio_index.RadioGroup, {
"value": radioSelect.value,
"onChange": handleRadioChange,
"placement": props2.placement,
"class": "".concat(dropdownItemClass.value, "__radio-group")
}, _isSlot(_slot = (options.value || []).map(function (option) {
return vue.createVNode(radio_index.Radio, {
"key": option.value,
"value": option.value,
"label": option.label,
"disabled": option.disabled,
"class": styleDropRadio(option.value),
"checked": isCheckedRadio(option.value),
"icon": "line"
}, null);
})) ? _slot : {
default: function _default() {
return [_slot];
}
});
}
return vue.createVNode(checkbox_index.CheckboxGroup, {
"value": checkSelect.value,
"onChange": handleCheckboxChange,
"class": "".concat(dropdownItemClass.value, "__checkbox-group"),
"style": "grid-template-columns: repeat(".concat(props2.optionsColumns, ", 1fr)")
}, _isSlot(_slot2 = (options.value || []).map(function (option) {
return vue.createVNode(checkbox_index.Checkbox, {
"key": option.value,
"class": "".concat(dropdownItemClass.value, "__checkbox-item t-checkbox--tag"),
"icon": false,
"borderless": true,
"value": option.value,
"label": option.label,
"disabled": option.disabled
}, null);
})) ? _slot2 : {
default: function _default() {
return [_slot2];
}
});
};
var footerSlot = function footerSlot() {
if (multiple.value) {
return vue.createVNode("div", {
"class": "".concat(dropdownItemClass.value, "__footer")
}, [vue.createVNode(button_index.Button, {
"theme": "light",
"class": "".concat(dropdownItemClass.value, "__footer-btn ").concat(dropdownItemClass.value, "__reset-btn"),
"disabled": isBtnDisabled.value,
"onClick": resetSelect
}, {
default: function _default() {
return [globalConfig.value.reset];
}
}), vue.createVNode(button_index.Button, {
"theme": "primary",
"class": "".concat(dropdownItemClass.value, "__footer-btn ").concat(dropdownItemClass.value, "__confirm-btn"),
"disabled": isBtnDisabled.value,
"onClick": confirmSelect
}, {
default: function _default() {
return [globalConfig.value.confirm];
}
})]);
}
};
var content = renderContent("default", "content");
var footer = renderTNodeJSX("footer");
return wrapperVisible.value && vue.createVNode("div", {
"id": popupId,
"class": classes.value,
"style": _objectSpread({}, expandStyle.value)
}, [vue.createVNode(vue.resolveComponent("t-popup"), {
"visible": isShowItems.value,
"placement": menuProps.direction === "up" ? "bottom" : "top",
"duration": duration.value,
"showOverlay": showOverlay.value,
"style": popupStyle.value,
"overlayProps": {
style: "position: absolute"
},
"attach": "#".concat(popupId),
"onVisibleChange": onVisibleChange
}, {
default: function _default() {
return [vue.createVNode("div", {
"ref": popupContent,
"class": "".concat(dropdownItemClass.value, "__content")
}, [vue.createVNode("div", {
"class": "".concat(dropdownItemClass.value, "__body")
}, [content || defaultSlot()]), footer || footerSlot()])];
}
})]);
};
}
});
exports["default"] = _DropdownItem;
//# sourceMappingURL=dropdown-item.js.map