tdesign-mobile-vue
Version:
tdesign-mobile-vue
399 lines (395 loc) • 16.2 kB
JavaScript
/**
* 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