@bagelink/vue 0.0.398 → 0.0.402

package/src/components/form/inputs/SelectInput.vue

@@ -120,12 +120,14 @@ const selectedLabel = $computed(() => {
 const emit = defineEmits(['update:modelValue']);
 
 const getLabel = (option: Option) => {
+	if (!option) return '';
 	if (typeof option === 'string') return option;
 	if (typeof option === 'number') return `${option}`;
 	return option.label;
 };
 
 const getValue = (option: Option) => {
+	if (!option) return '';
 	if (typeof option === 'string') return option;
 	if (typeof option === 'number') return option;
 	return option.value;
@@ -182,7 +184,6 @@ function compareArrays(arr1: Option[], arr2: Option[]) {
 watch(
 	() => props.modelValue,
 	(newVal: Option | Option[]) => {
-		if (!newVal) return;
 		if (!props.multiselect) {
 			const newOption =
 				props.options.find((o) => getValue(o) === newVal) || newVal;
@@ -202,7 +203,6 @@ watch(
 watch(
 	() => props.options,
 	() => {
-		const original = JSON.stringify(props.options.map(getValue));
 		[...selectedItems].forEach((option, i) => {
 			const exists = props.options.find(
 				(o) => getValue(o) === getValue(option)
@@ -210,8 +210,9 @@ watch(
 			if (!exists) selectedItems.splice(i, 1);
 			else selectedItems.splice(i, 1, exists);
 		});
-		const newSelection = JSON.stringify(selectedItems.map(getValue));
-		if (original !== newSelection) emitUpdate();
+		// const original = JSON.stringify(props.options.map(getValue));
+		// const newSelection = JSON.stringify(selectedItems.map(getValue));
+		// if (original !== newSelection) emitUpdate();
 	},
 	{ deep: true }
 );

package/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as Alert } from './Alert.vue';
 export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';
 export { default as Carousel } from './Carousel.vue';
+export { default as ModalConfirm } from './ModalConfirm.vue';
 
 export * from './form';
 export * from './dashboard';

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;
+    }
+
 }