|
@@ -1,193 +1,199 @@
|
|
|
-import {ExtractPropTypes, ref, reactive, computed} from 'vue'
|
|
|
-import {useCyNamespace} from "@/utils/xiaochan-element-plus";
|
|
|
-import {useResizeObserver} from "@vueuse/core";
|
|
|
-import {useDraggable} from "element-plus";
|
|
|
-import {ClosingMethod} from "@/components/js-dialog-comp/useDialogToJs";
|
|
|
-
|
|
|
-export const CyDialogProps = {
|
|
|
- title: String,
|
|
|
- fullScreen: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- confirmText: {
|
|
|
- type: String,
|
|
|
- default: '确认',
|
|
|
- },
|
|
|
- cancelText: {
|
|
|
- type: String,
|
|
|
- default: '取消',
|
|
|
- },
|
|
|
- confirmClick: {
|
|
|
- type: Function,
|
|
|
- default: null
|
|
|
- },
|
|
|
- cancelClick: {
|
|
|
- type: Function,
|
|
|
- default: null
|
|
|
- },
|
|
|
- bodyHeight: {
|
|
|
- type: [Number, String],
|
|
|
- default: 'max-content'
|
|
|
- },
|
|
|
- bodyWidth: {
|
|
|
- type: [Number, String],
|
|
|
- default: '500px'
|
|
|
- },
|
|
|
- ignoreError: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- bodyPadding: {
|
|
|
- type: String,
|
|
|
- default: '10px'
|
|
|
- },
|
|
|
- showCancelButton: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
+import { ExtractPropTypes, ref, reactive, computed } from "vue";
|
|
|
+import { useCyNamespace } from "@/utils/xiaochan-element-plus";
|
|
|
+import { useResizeObserver } from "@vueuse/core";
|
|
|
+import { useDraggable } from "element-plus";
|
|
|
+
|
|
|
+export enum ClosingMethod {
|
|
|
+ CONFIRM = "confirm",
|
|
|
+ CANCEL = "cancel",
|
|
|
}
|
|
|
|
|
|
-export type IsCyDialog = ExtractPropTypes<typeof CyDialogProps>
|
|
|
+export const CyDialogProps = {
|
|
|
+ title: String,
|
|
|
+ fullScreen: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ confirmText: {
|
|
|
+ type: String,
|
|
|
+ default: "确认",
|
|
|
+ },
|
|
|
+ cancelText: {
|
|
|
+ type: String,
|
|
|
+ default: "取消",
|
|
|
+ },
|
|
|
+ confirmClick: {
|
|
|
+ type: Function,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ cancelClick: {
|
|
|
+ type: Function,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ bodyHeight: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: "max-content",
|
|
|
+ },
|
|
|
+ bodyWidth: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: "500px",
|
|
|
+ },
|
|
|
+ ignoreError: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ bodyPadding: {
|
|
|
+ type: String,
|
|
|
+ default: "10px",
|
|
|
+ },
|
|
|
+ showCancelButton: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+export type IsCyDialog = ExtractPropTypes<typeof CyDialogProps>;
|
|
|
|
|
|
export function useCyDialog(props: IsCyDialog, emit: any) {
|
|
|
- const ns = useCyNamespace('dialog')
|
|
|
- const headerRef = ref()
|
|
|
- const footerRef = ref()
|
|
|
- const containerRef = ref()
|
|
|
- const boxRef = ref()
|
|
|
- const bodyRef = ref()
|
|
|
-
|
|
|
- const state = reactive({
|
|
|
- bodySize: {
|
|
|
- height: 0,
|
|
|
- width: 0
|
|
|
- },
|
|
|
- headerHeight: 0,
|
|
|
- footerHeight: 0,
|
|
|
- confirmLoading: false,
|
|
|
- cancelLoading: false
|
|
|
- })
|
|
|
-
|
|
|
- const draggable = computed(() => {
|
|
|
- return !props.fullScreen;
|
|
|
- })
|
|
|
-
|
|
|
- const bodyStyle = computed(() => {
|
|
|
- if (props.fullScreen) {
|
|
|
- return {
|
|
|
- height: `calc(100% - ${state.headerHeight}px - ${state.footerHeight}px)`,
|
|
|
- padding: props.bodyPadding,
|
|
|
- overflowY: 'auto',
|
|
|
- }
|
|
|
- } else {
|
|
|
- return {
|
|
|
- height: props.bodyHeight,
|
|
|
- padding: props.bodyPadding,
|
|
|
- overflowY: 'auto',
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const boxStyle = computed(() => {
|
|
|
- return {
|
|
|
- width: props.fullScreen ? "" : props.bodyWidth,
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- useResizeObserver(headerRef, (entries) => {
|
|
|
- // @ts-ignore
|
|
|
- state.headerHeight = entries[0].target.offsetHeight
|
|
|
- })
|
|
|
-
|
|
|
- useResizeObserver(footerRef, (entries) => {
|
|
|
- // @ts-ignore
|
|
|
- state.footerHeight = entries[0].target.offsetHeight
|
|
|
- })
|
|
|
-
|
|
|
- useResizeObserver(bodyRef, (entries) => {
|
|
|
- state.bodySize = {
|
|
|
- // @ts-ignore
|
|
|
- height: entries[0].target.offsetHeight,
|
|
|
- // @ts-ignore
|
|
|
- width: entries[0].target.offsetWidth,
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- useDraggable(boxRef, headerRef, draggable)
|
|
|
-
|
|
|
-
|
|
|
- function closed(closingMethod: ClosingMethod, val: any) {
|
|
|
- emit('closed', closingMethod, val)
|
|
|
+ const ns = useCyNamespace("dialog");
|
|
|
+ const headerRef = ref();
|
|
|
+ const footerRef = ref();
|
|
|
+ const containerRef = ref();
|
|
|
+ const boxRef = ref();
|
|
|
+ const bodyRef = ref();
|
|
|
+
|
|
|
+ const state = reactive({
|
|
|
+ bodySize: {
|
|
|
+ height: 0,
|
|
|
+ width: 0,
|
|
|
+ },
|
|
|
+ headerHeight: 0,
|
|
|
+ footerHeight: 0,
|
|
|
+ confirmLoading: false,
|
|
|
+ cancelLoading: false,
|
|
|
+ });
|
|
|
+
|
|
|
+ const draggable = computed(() => {
|
|
|
+ return !props.fullScreen;
|
|
|
+ });
|
|
|
+
|
|
|
+ const bodyStyle = computed(() => {
|
|
|
+ if (props.fullScreen) {
|
|
|
+ return {
|
|
|
+ height: `calc(100% - ${state.headerHeight}px - ${state.footerHeight}px)`,
|
|
|
+ padding: props.bodyPadding,
|
|
|
+ overflowY: "auto",
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ height: props.bodyHeight,
|
|
|
+ padding: props.bodyPadding,
|
|
|
+ overflowY: "auto",
|
|
|
+ };
|
|
|
}
|
|
|
+ });
|
|
|
|
|
|
- async function handleConfirm() {
|
|
|
- state.confirmLoading = true;
|
|
|
-
|
|
|
- function next(val: any) {
|
|
|
- closed(ClosingMethod.CONFIRM, val)
|
|
|
- }
|
|
|
-
|
|
|
- if (props.confirmClick) {
|
|
|
- try {
|
|
|
- await props.confirmClick(next)
|
|
|
- } catch (e) {
|
|
|
- console.error(e)
|
|
|
- } finally {
|
|
|
- state.confirmLoading = false;
|
|
|
- }
|
|
|
- return
|
|
|
- }
|
|
|
- state.confirmLoading = false;
|
|
|
- next(null)
|
|
|
+ const boxStyle = computed(() => {
|
|
|
+ return {
|
|
|
+ width: props.fullScreen ? "" : props.bodyWidth,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ useResizeObserver(headerRef, entries => {
|
|
|
+ // @ts-ignore
|
|
|
+ state.headerHeight = entries[0].target.offsetHeight;
|
|
|
+ });
|
|
|
+
|
|
|
+ useResizeObserver(footerRef, entries => {
|
|
|
+ // @ts-ignore
|
|
|
+ state.footerHeight = entries[0].target.offsetHeight;
|
|
|
+ });
|
|
|
+
|
|
|
+ useResizeObserver(bodyRef, entries => {
|
|
|
+ state.bodySize = {
|
|
|
+ // @ts-ignore
|
|
|
+ height: entries[0].target.offsetHeight,
|
|
|
+ // @ts-ignore
|
|
|
+ width: entries[0].target.offsetWidth,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ useDraggable(boxRef, headerRef, draggable);
|
|
|
+
|
|
|
+ function closed(closingMethod: ClosingMethod, val: any) {
|
|
|
+ emit("closed", closingMethod, val);
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleConfirm() {
|
|
|
+ state.confirmLoading = true;
|
|
|
+
|
|
|
+ function next(val: any) {
|
|
|
+ closed(ClosingMethod.CONFIRM, val);
|
|
|
}
|
|
|
|
|
|
- async function handleCancel() {
|
|
|
- state.cancelLoading = true;
|
|
|
-
|
|
|
- function next(val: any) {
|
|
|
- closed(props.ignoreError ? ClosingMethod.CONFIRM : ClosingMethod.CANCEL, val)
|
|
|
- }
|
|
|
-
|
|
|
- if (props.cancelClick) {
|
|
|
- try {
|
|
|
- await props.cancelClick(next)
|
|
|
- } catch (e) {
|
|
|
- console.error(e)
|
|
|
- } finally {
|
|
|
- state.cancelLoading = false;
|
|
|
- }
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- state.cancelLoading = false;
|
|
|
- next(null)
|
|
|
+ if (props.confirmClick) {
|
|
|
+ try {
|
|
|
+ await props.confirmClick(next);
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ } finally {
|
|
|
+ state.confirmLoading = false;
|
|
|
+ }
|
|
|
+ return;
|
|
|
}
|
|
|
-
|
|
|
- function onFocusoutPrevented(event: CustomEvent) {
|
|
|
- if (event.detail?.focusReason === 'pointer') {
|
|
|
- event.preventDefault()
|
|
|
- }
|
|
|
+ state.confirmLoading = false;
|
|
|
+ next(null);
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleCancel() {
|
|
|
+ state.cancelLoading = true;
|
|
|
+
|
|
|
+ function next(val: any) {
|
|
|
+ closed(
|
|
|
+ props.ignoreError ? ClosingMethod.CONFIRM : ClosingMethod.CANCEL,
|
|
|
+ val
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
- function onCloseRequested() {
|
|
|
- handleCancel()
|
|
|
+ if (props.cancelClick) {
|
|
|
+ try {
|
|
|
+ await props.cancelClick(next);
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ } finally {
|
|
|
+ state.cancelLoading = false;
|
|
|
+ }
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- return {
|
|
|
- ns,
|
|
|
- headerRef,
|
|
|
- footerRef,
|
|
|
- bodyStyle,
|
|
|
- containerRef,
|
|
|
- boxRef,
|
|
|
- bodyRef,
|
|
|
- state,
|
|
|
- handleConfirm,
|
|
|
- handleCancel,
|
|
|
- onFocusoutPrevented,
|
|
|
- boxStyle,
|
|
|
- onCloseRequested,
|
|
|
- closed
|
|
|
+ state.cancelLoading = false;
|
|
|
+ next(null);
|
|
|
+ }
|
|
|
+
|
|
|
+ function onFocusoutPrevented(event: CustomEvent) {
|
|
|
+ if (event.detail?.focusReason === "pointer") {
|
|
|
+ event.preventDefault();
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ function onCloseRequested() {
|
|
|
+ handleCancel();
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ ns,
|
|
|
+ headerRef,
|
|
|
+ footerRef,
|
|
|
+ bodyStyle,
|
|
|
+ containerRef,
|
|
|
+ boxRef,
|
|
|
+ bodyRef,
|
|
|
+ state,
|
|
|
+ handleConfirm,
|
|
|
+ handleCancel,
|
|
|
+ onFocusoutPrevented,
|
|
|
+ boxStyle,
|
|
|
+ onCloseRequested,
|
|
|
+ closed,
|
|
|
+ };
|
|
|
}
|