140 lines
4.1 KiB
JavaScript
140 lines
4.1 KiB
JavaScript
import { nextTick, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
|
import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
|
|
import { Icon } from "../icon/index.mjs";
|
|
import { Popup } from "../popup/index.mjs";
|
|
import { Loading } from "../loading/index.mjs";
|
|
import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
|
|
const [name, bem] = createNamespace("action-sheet");
|
|
const actionSheetProps = extend({}, popupSharedProps, {
|
|
title: String,
|
|
round: truthProp,
|
|
actions: makeArrayProp(),
|
|
closeIcon: makeStringProp("cross"),
|
|
closeable: truthProp,
|
|
cancelText: String,
|
|
description: String,
|
|
closeOnPopstate: truthProp,
|
|
closeOnClickAction: Boolean,
|
|
safeAreaInsetBottom: truthProp
|
|
});
|
|
const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: actionSheetProps,
|
|
emits: ["select", "cancel", "update:show"],
|
|
setup(props, {
|
|
slots,
|
|
emit
|
|
}) {
|
|
const updateShow = (show) => emit("update:show", show);
|
|
const onCancel = () => {
|
|
updateShow(false);
|
|
emit("cancel");
|
|
};
|
|
const renderHeader = () => {
|
|
if (props.title) {
|
|
return _createVNode("div", {
|
|
"class": bem("header")
|
|
}, [props.title, props.closeable && _createVNode(Icon, {
|
|
"name": props.closeIcon,
|
|
"class": [bem("close"), HAPTICS_FEEDBACK],
|
|
"onClick": onCancel
|
|
}, null)]);
|
|
}
|
|
};
|
|
const renderCancel = () => {
|
|
if (slots.cancel || props.cancelText) {
|
|
return [_createVNode("div", {
|
|
"class": bem("gap")
|
|
}, null), _createVNode("button", {
|
|
"type": "button",
|
|
"class": bem("cancel"),
|
|
"onClick": onCancel
|
|
}, [slots.cancel ? slots.cancel() : props.cancelText])];
|
|
}
|
|
};
|
|
const renderIcon = (action) => {
|
|
if (action.icon) {
|
|
return _createVNode(Icon, {
|
|
"class": bem("item-icon"),
|
|
"name": action.icon
|
|
}, null);
|
|
}
|
|
};
|
|
const renderActionContent = (action, index) => {
|
|
if (action.loading) {
|
|
return _createVNode(Loading, {
|
|
"class": bem("loading-icon")
|
|
}, null);
|
|
}
|
|
if (slots.action) {
|
|
return slots.action({
|
|
action,
|
|
index
|
|
});
|
|
}
|
|
return [_createVNode("span", {
|
|
"class": bem("name")
|
|
}, [action.name]), action.subname && _createVNode("div", {
|
|
"class": bem("subname")
|
|
}, [action.subname])];
|
|
};
|
|
const renderAction = (action, index) => {
|
|
const {
|
|
color,
|
|
loading,
|
|
callback,
|
|
disabled,
|
|
className
|
|
} = action;
|
|
const onClick = () => {
|
|
if (disabled || loading) {
|
|
return;
|
|
}
|
|
if (callback) {
|
|
callback(action);
|
|
}
|
|
if (props.closeOnClickAction) {
|
|
updateShow(false);
|
|
}
|
|
nextTick(() => emit("select", action, index));
|
|
};
|
|
return _createVNode("button", {
|
|
"type": "button",
|
|
"style": {
|
|
color
|
|
},
|
|
"class": [bem("item", {
|
|
loading,
|
|
disabled
|
|
}), className],
|
|
"onClick": onClick
|
|
}, [renderIcon(action), renderActionContent(action, index)]);
|
|
};
|
|
const renderDescription = () => {
|
|
if (props.description || slots.description) {
|
|
const content = slots.description ? slots.description() : props.description;
|
|
return _createVNode("div", {
|
|
"class": bem("description")
|
|
}, [content]);
|
|
}
|
|
};
|
|
return () => _createVNode(Popup, _mergeProps({
|
|
"class": bem(),
|
|
"position": "bottom",
|
|
"onUpdate:show": updateShow
|
|
}, pick(props, popupInheritKeys)), {
|
|
default: () => {
|
|
var _a;
|
|
return [renderHeader(), renderDescription(), _createVNode("div", {
|
|
"class": bem("content")
|
|
}, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
|
|
}
|
|
});
|
|
}
|
|
});
|
|
export {
|
|
actionSheetProps,
|
|
stdin_default as default
|
|
};
|