UNPKG

tdesign-mobile-vue

Version:
399 lines (395 loc) 16.2 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import _defineProperty from '@babel/runtime/helpers/defineProperty'; import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import { defineComponent, ref, toRefs, inject, computed, onBeforeMount, reactive, watch, createVNode, resolveComponent, nextTick, isVNode } from 'vue'; import { RadioGroup, Radio } from '../radio/index.js'; import config from '../config.js'; import { Button } from '../button/index.js'; import { Popup } from '../popup/index.js'; import { CheckboxGroup, Checkbox } from '../checkbox/index.js'; import props from './dropdown-item-props.js'; import { useContent, useTNodeJSX } from '../hooks/tnode.js'; import { usePrefixClass } from '../hooks/useClass.js'; import { useConfig } from '../config-provider/useConfig.js'; import { getWindowSize } from '../shared/dom.js'; import { uniqueFactory } from '../shared/util.js'; import { useVModel } from '../shared/useVModel/index.js'; import '../radio/radio.js'; import 'tdesign-icons-vue-next'; import '../radio/props.js'; import '../form/hooks.js'; import 'lodash/isBoolean'; import '../shared/useDefault/index.js'; import 'lodash/camelCase'; import 'lodash/isFunction'; import 'lodash/cloneDeep'; import 'lodash/isString'; 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-d5364bc4.js'; import '@babel/runtime/helpers/typeof'; import '../_chunks/dep-eb734424.js'; import 'dayjs'; import 'lodash/kebabCase'; import '../hooks/render-tnode.js'; import 'lodash/isEmpty'; import 'lodash/isObject'; import '../radio/radio-group.js'; import '../radio/radio-group-props.js'; import '../shared/component.js'; import '../button/button.js'; import '../loading/index.js'; import '../loading/loading.js'; import '../loading/icon/gradient.js'; import '../_common/js/loading/circle-adapter.js'; import '../_common/js/utils/set-style.js'; import '../_common/js/utils/helper.js'; import '@babel/runtime/helpers/toConsumableArray'; import '@babel/runtime/helpers/objectWithoutProperties'; import 'lodash/isNull'; import 'lodash/isUndefined'; import 'lodash/isNumber'; import '../loading/icon/spinner.js'; import '../loading/props.js'; import '../loading/plugin.js'; import '../button/props.js'; import '../shared/hover.js'; import '../popup/popup.js'; import '../popup/props.js'; import '../overlay/index.js'; import '../overlay/overlay.js'; import '../overlay/props.js'; import '../hooks/useLockScroll.js'; import '../_util/useTouch.js'; import '../_util/getScrollParent.js'; import '../_util/supportsPassive.js'; import '../hooks/useTeleport.js'; import '../shared/render-tnode.js'; import '../checkbox/checkbox.js'; import '../checkbox/props.js'; import '../checkbox/checkbox-group.js'; import '../checkbox/checkbox-group-props.js'; import '../checkbox/hooks/getOptions.js'; import '../shared/useChildSlots/index.js'; import '../checkbox/hooks/setCheckAllStatus.js'; import 'lodash/intersection'; 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(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]' && !isVNode(s); } var prefix = config.prefix; var getUniqueID = uniqueFactory("dropdown-popup"); var _DropdownItem = defineComponent({ name: "".concat(prefix, "-dropdown-item"), components: { TPopup: Popup }, props: props, emits: ["change", "open", "opened", "close", "closed", "update:value", "update:modelValue"], setup: function setup(props2) { var dropdownItemClass = usePrefixClass("dropdown-item"); var _useConfig = useConfig("dropdownMenu"), globalConfig = _useConfig.globalConfig; var renderContent = useContent(); var renderTNodeJSX = useTNodeJSX(); var popupContent = ref(null); var _toRefs = toRefs(props2), value = _toRefs.value, modelValue = _toRefs.modelValue; var _useVModel = useVModel(value, modelValue, props2.defaultValue), _useVModel2 = _slicedToArray(_useVModel, 2), passInValue = _useVModel2[0], setValue = _useVModel2[1]; var menuProps = inject("dropdownMenuProps"); var menuState = inject("dropdownMenuState"); var _inject = inject("dropdownMenuControl"); _inject.expandMenu; var collapseMenu = _inject.collapseMenu, emitEvents = _inject.emitEvents; var classes = computed(function () { return ["".concat(dropdownItemClass.value)]; }); var itemId = ref(0); onBeforeMount(function () { itemId.value = menuState.childCount; menuState.childCount += 1; }); var state = reactive({ showOverlay: computed(function () { return menuProps.showOverlay; }), duration: computed(function () { return menuProps.duration; }), isShowItems: false, wrapperVisible: false, expandStyle: {}, multiple: computed(function () { return props2.multiple; }), options: 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(_defineProperty({}, "".concat(prefix, "-is-tick"), !props2.multiple), "".concat(prefix, "-is-checked"), isCheckedRadio(value2))]; }; var popupStyle = 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 = 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; } 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)); }; watch(function () { return menuState.activeId === itemId.value; }, function (val) { return setExpand(val); }); var radioSelect = ref(); var checkSelect = 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); watch(function () { return passInValue.value; }, function (val) { if (!val) return; updateSelectValue(val); }); var isBtnDisabled = 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"); }; 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)); } }); 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 = 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 createVNode(RadioGroup, { "value": radioSelect.value, "onChange": handleRadioChange, "placement": props2.placement, "class": "".concat(dropdownItemClass.value, "__radio-group") }, _isSlot(_slot = (options.value || []).map(function (option) { return createVNode(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 createVNode(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 createVNode(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 createVNode("div", { "class": "".concat(dropdownItemClass.value, "__footer") }, [createVNode(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]; } }), createVNode(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 && createVNode("div", { "id": popupId, "class": classes.value, "style": _objectSpread({}, expandStyle.value) }, [createVNode(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 [createVNode("div", { "ref": popupContent, "class": "".concat(dropdownItemClass.value, "__content") }, [createVNode("div", { "class": "".concat(dropdownItemClass.value, "__body") }, [content || defaultSlot()]), footer || footerSlot()])]; } })]); }; } }); export { _DropdownItem as default }; //# sourceMappingURL=dropdown-item.js.map