UNPKG

tdesign-mobile-vue

Version:
427 lines (419 loc) 18.1 kB
/** * tdesign v1.9.3 * (c) 2025 TDesign Group * @license MIT */ 'use strict'; 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_useVModel = require('../hooks/useVModel.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useClass = require('../hooks/useClass.js'); var shared_util = require('../shared/util.js'); var configProvider_useConfig = require('../_chunks/dep-21f18d3b.js'); var get = require('../_chunks/dep-7fa39e6f.js'); var shared_dom = require('../shared/dom.js'); require('../radio/radio.js'); require('tdesign-icons-vue-next'); require('../radio/props.js'); require('../form/hooks.js'); require('../_chunks/dep-d5bc9590.js'); require('../_chunks/dep-2f809ed9.js'); require('@babel/runtime/helpers/typeof'); require('../_chunks/dep-5be9198d.js'); require('../_chunks/dep-6df33aaf.js'); require('../_chunks/dep-3d4c38f1.js'); require('../_chunks/dep-afa9f3f2.js'); require('../_chunks/dep-ae809b86.js'); require('../_chunks/dep-757b152c.js'); require('../_chunks/dep-2b08c0a6.js'); require('../_chunks/dep-b9642a56.js'); require('../_common/js/global-config/mobile/default-config.js'); require('../_common/js/global-config/mobile/locale/zh_CN.js'); require('../_chunks/dep-28b1e09d.js'); require('../_chunks/dep-57aa1aa0.js'); require('dayjs'); require('../_chunks/dep-85204fa0.js'); require('../_chunks/dep-f6b14f80.js'); require('../_chunks/dep-a8d60643.js'); require('../_chunks/dep-7c911ba3.js'); require('../_chunks/dep-88fe047a.js'); require('../_chunks/dep-ef223206.js'); require('../_chunks/dep-49f0a63e.js'); require('../_chunks/dep-d950aa21.js'); require('../_chunks/dep-a697b1b9.js'); require('../_chunks/dep-4dfb9b9c.js'); require('../_chunks/dep-c65deed7.js'); require('../_chunks/dep-94eeec5a.js'); require('../_chunks/dep-060bf1cf.js'); require('../_chunks/dep-0e05e959.js'); require('../_chunks/dep-324da301.js'); require('../_chunks/dep-da6dc2cf.js'); require('../_chunks/dep-ccc9ad3d.js'); require('../_chunks/dep-c3cb976c.js'); require('../hooks/render-tnode.js'); require('../_chunks/dep-a7319409.js'); require('../_chunks/dep-288156c7.js'); require('../_chunks/dep-675798b4.js'); require('../_common/js/utils/general.js'); require('../radio/radio-group.js'); require('../radio/radio-group-props.js'); require('../_chunks/dep-0528a76d.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/setStyle.js'); require('../_common/js/utils/helper.js'); require('@babel/runtime/helpers/toConsumableArray'); require('@babel/runtime/helpers/objectWithoutProperties'); require('../_chunks/dep-6b5052db.js'); require('../_chunks/dep-f11711eb.js'); require('../_chunks/dep-ff4786c0.js'); 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('../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('../hooks/useChildSlots.js'); require('../checkbox/hooks/setCheckAllStatus.js'); require('../_chunks/dep-731c3bbd.js'); 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"), props: dropdownMenu_dropdownItemProps["default"], emits: ["change", "open", "opened", "close", "closed", "update:value", "update:modelValue"], setup: function setup(props2) { var classPrefix = hooks_useClass.usePrefixClass(); 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 = hooks_useVModel["default"](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; var keys = props2.keys; return (_props2$options = props2.options) === null || _props2$options === void 0 ? void 0 : _props2$options.map(function (item) { var _keys$value, _keys$label, _keys$disabled; return { value: get.get(item, (_keys$value = keys === null || keys === void 0 ? void 0 : keys.value) !== null && _keys$value !== void 0 ? _keys$value : "value"), label: get.get(item, (_keys$label = keys === null || keys === void 0 ? void 0 : keys.label) !== null && _keys$label !== void 0 ? _keys$label : "label"), disabled: get.get(item, (_keys$disabled = keys === null || keys === void 0 ? void 0 : keys.disabled) !== null && _keys$disabled !== void 0 ? _keys$disabled : "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(classPrefix.value, "-is-tick"), !props2.multiple), "".concat(classPrefix.value, "-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(popup_index.Popup, { "visible": isShowItems.value, "placement": menuProps.direction === "up" ? "bottom" : "top", "duration": Number(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