@bagelink/vue 0.0.400 → 0.0.402

package/src/plugins/modal.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm } from '@bagelink/vue';
+import { Modal, ModalForm, ModalConfirm } from '@bagelink/vue';
 
 export interface ModalOptions {
 	title?: string;
@@ -29,10 +29,20 @@ export interface ModalFormOptions {
 	'onUpdate:modelValue'?: (val: any) => void;
 }
 
+export type ModalConfirmOptions = {
+	title?: string;
+	message?: string;
+	resolve: (val: boolean) => void;
+}
+
+type ModalType = 'modal' | 'modalForm' | 'confirm'
+
+type ConfirmModalUserOptions = string | { title: string, message: string }
+
 export interface ModalComponentProps {
 	componentSlots: Record<string, any>,
-	modalType: 'modal' | 'modalForm',
-	modalOptions: ModalOptions | ModalFormOptions
+	modalType: ModalType,
+	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
 }
 export interface ModalFormComponentProps {
 	componentSlots: Record<string, any>,
@@ -43,6 +53,7 @@ export interface ModalApi {
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
 	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
 	hideModal: (index?: number) => void;
+	confirm: (options: ConfirmModalUserOptions) => Promise<boolean>;
 }
 
 export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
@@ -61,8 +72,17 @@ export const ModalPlugin: Plugin = {
 			modalStack.splice(index, 1);
 		};
 
+		const modalConfirm = (options: ConfirmModalUserOptions) => new Promise<boolean>((resolve) => {
+			if (typeof options === 'string') options = { title: options, message: '' };
+			modalStack.push({
+				modalOptions: { ...options, resolve },
+				modalType: 'confirm',
+				componentSlots: {},
+			});
+		});
+
 		const showModal = (
-			modalType: 'modal' | 'modalForm',
+			modalType: ModalType,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
@@ -78,6 +98,7 @@ export const ModalPlugin: Plugin = {
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
 			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
+			confirm: (userOptions: ConfirmModalUserOptions) => modalConfirm(userOptions),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
@@ -88,6 +109,7 @@ export const ModalPlugin: Plugin = {
 				return modalStack.map((modal, index) => {
 					const props = { ...modal.modalOptions, visible: true, 'onUpdate:visible': () => hideModal(index) };
 					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
+					if (modal.modalType === 'confirm') return h(ModalConfirm, props as any, {});
 					return h(Modal, props, modal.componentSlots);
 				});
 			},

package/src/styles/layout.css

@@ -1620,6 +1620,15 @@
     width: 100%;
 }
 
+.ltr,
+.direction-ltr {
+    direction: ltr;
+}
+
+.rtl,
+.direction-rtl {
+    direction: rtl;
+}
 
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {

package/src/styles/mobilLayout.css

@@ -1520,4 +1520,15 @@
     .m_overflow-y-hidden {
         overflow-y: hidden;
     }
+
+    .m_ltr,
+    .m_direction-ltr {
+        direction: ltr;
+    }
+
+    .m_rtl,
+    .m_direction-rtl {
+        direction: rtl;
+    }
+
 }