Mr.Dat
77ece5224d
- Updated DangerZone.vue to use AppButton and AppDialog, replacing PrimeVue Button and Dialog components. - Refactored DomainsDns.vue to utilize AppButton, AppDialog, and AppInput, enhancing the UI consistency. - Modified NotificationSettings.vue and PlayerSettings.vue to implement AppButton and AppSwitch for better styling. - Replaced PrimeVue components in SecurityNConnected.vue with AppButton, AppDialog, and AppInput for a cohesive design. - Introduced AppConfirmHost for handling confirmation dialogs with a custom design. - Created AppToastHost for managing toast notifications with custom styling and behavior. - Added utility composables useAppConfirm and useAppToast for managing confirmation dialogs and toast notifications. - Implemented AppProgressBar and AppSwitch components for improved UI elements.
87 lines
1.9 KiB
TypeScript
87 lines
1.9 KiB
TypeScript
import { computed, reactive, readonly } from 'vue';
|
|
|
|
export type AppConfirmOptions = {
|
|
message: string;
|
|
header?: string;
|
|
acceptLabel?: string;
|
|
rejectLabel?: string;
|
|
accept?: () => void | Promise<void>;
|
|
reject?: () => void;
|
|
};
|
|
|
|
type AppConfirmState = {
|
|
visible: boolean;
|
|
loading: boolean;
|
|
message: string;
|
|
header: string;
|
|
acceptLabel: string;
|
|
rejectLabel: string;
|
|
accept?: () => void | Promise<void>;
|
|
reject?: () => void;
|
|
};
|
|
|
|
const state = reactive<AppConfirmState>({
|
|
visible: false,
|
|
loading: false,
|
|
message: '',
|
|
header: 'Confirm',
|
|
acceptLabel: 'OK',
|
|
rejectLabel: 'Cancel',
|
|
});
|
|
|
|
const requireConfirm = (options: AppConfirmOptions) => {
|
|
state.visible = true;
|
|
state.loading = false;
|
|
state.message = options.message;
|
|
state.header = options.header ?? 'Confirm';
|
|
state.acceptLabel = options.acceptLabel ?? 'OK';
|
|
state.rejectLabel = options.rejectLabel ?? 'Cancel';
|
|
state.accept = options.accept;
|
|
state.reject = options.reject;
|
|
};
|
|
|
|
const close = () => {
|
|
state.visible = false;
|
|
state.loading = false;
|
|
state.message = '';
|
|
state.accept = undefined;
|
|
state.reject = undefined;
|
|
};
|
|
|
|
const onReject = () => {
|
|
try {
|
|
state.reject?.();
|
|
} finally {
|
|
close();
|
|
}
|
|
};
|
|
|
|
const onAccept = async () => {
|
|
state.loading = true;
|
|
try {
|
|
await state.accept?.();
|
|
close();
|
|
} catch (e) {
|
|
// Keep dialog open on error; caller can show a toast.
|
|
throw e;
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
};
|
|
|
|
export const useAppConfirm = () => {
|
|
return {
|
|
require: requireConfirm,
|
|
close,
|
|
accept: onAccept,
|
|
reject: onReject,
|
|
visible: computed(() => state.visible),
|
|
loading: computed(() => state.loading),
|
|
message: computed(() => state.message),
|
|
header: computed(() => state.header),
|
|
acceptLabel: computed(() => state.acceptLabel),
|
|
rejectLabel: computed(() => state.rejectLabel),
|
|
_state: readonly(state),
|
|
};
|
|
};
|