@bagelink/vue 0.0.740 → 0.0.742

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

@@ -102,7 +102,7 @@ const defaultInputOptions = {
 	'readonly': false,
 	'tabindex': 0,
 	'style': '' as Raw<StyleValue>,
-	'placeholder': 'Enter a phone number',
+	// 'placeholder': 'Enter a phone number',
 }
 
 const computedDropDownOptions = $computed(() => ({
@@ -388,7 +388,7 @@ function handleInput(e: KeyboardEvent) {
 					:id="id"
 					v-model="phone"
 					:required="required"
-					:placeholder="computedInputOptions.placeholder"
+					:placeholder="props.placeholder || 'Enter a phone number'"
 					:disabled="disabled"
 					type="tel"
 					:autocomplete="autocomplete"

package/src/plugins/modal.ts

@@ -1,8 +1,9 @@
 import { defineComponent, h, inject } from 'vue'
-import type { InjectionKey,	Plugin } from 'vue'
+import type { InjectionKey, Plugin } from 'vue'
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue'
 import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
 
+// Interface Definitions
 export interface ModalOptions {
 	title?: string
 	dismissable?: boolean
@@ -13,28 +14,24 @@ export interface ModalOptions {
 	visible?: boolean
 }
 
-export interface ModalFormOptions {
-	'side'?: boolean
-	'title'?: string
-	'visible'?: boolean
-	'width'?: string
-	'dismissable'?: boolean
+export interface ModalFormOptions extends ModalOptions {
 	'schema': BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
 	'onSubmit'?: (formData: any) => any
 	'onDelete'?: (id: string) => Promise<void>
-	'onError'?: ((err: any) => void)
+	'onError'?: (err: any) => void
 	'modelValue'?: Record<string, any>
 	'onUpdate:modelValue'?: (val: any) => void
 }
 
 export interface ModalConfirmOptions {
-	title?: string
-	message?: string
-	resolve: (val: boolean) => void
+	'title': string
+	'message': string
+	'resolve': (val: boolean) => void
+	'onUpdate:visible': () => void
+	'visible': boolean
 }
 
-type ModalType = 'modal' | 'modalForm' | 'confirm'
-
+type ModalType = 'modal' | 'modalForm' | 'confirmModal'
 type ConfirmModalUserOptions = string | { title: string, message: string }
 
 export interface ModalComponentProps {
@@ -43,8 +40,7 @@ export interface ModalComponentProps {
 	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
 }
 
-export interface ModalFormComponentProps {
-	componentSlots: Record<string, any>
+export interface ModalFormComponentProps extends ModalComponentProps {
 	modalType: 'modalForm'
 	modalOptions: ModalFormOptions
 }
@@ -72,79 +68,66 @@ export const ModalPlugin: Plugin = {
 			modalStack.splice(index, 1)
 		}
 
-		const modalConfirm = async (
-			options: ConfirmModalUserOptions
-		) => new Promise<boolean>(
-			(resolve) => {
-				if (typeof options === 'string') options = { title: '', message: options }
+		const confirmModal = (options: ConfirmModalUserOptions): Promise<boolean> => {
+			return new Promise((resolve) => {
+				const confirmOptions = typeof options === 'string' ? { title: '', message: options } : options
 				modalStack.push({
-					modalOptions: { ...options, resolve },
-					modalType: 'confirm',
+					modalOptions: { ...confirmOptions, resolve },
+					modalType: 'confirmModal',
 					componentSlots: {},
 				})
-			}
-		)
+			})
+		}
 
 		const showModal = (
 			modalType: ModalType,
 			options: ModalOptions | ModalFormOptions,
-			slots: Record<string, any> = {},
-		) => {
-			modalStack.push({
+			slots: Record<string, any> = {}
+		): ModalComponentProps | ModalFormComponentProps | undefined => {
+			const modalComponent = {
 				modalOptions: options,
 				modalType,
 				componentSlots: slots,
-			})
-
-			if (modalType === 'modalForm') return modalStack.at(-1) as ModalFormComponentProps | undefined
+			}
+			modalStack.push(modalComponent)
 
-			return modalStack.at(-1)
+			if (modalType === 'modalForm') {
+				return modalComponent as ModalFormComponentProps
+			}
+			return modalComponent
 		}
 
 		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,
-			confirmModal: async (
-				userOptions: ConfirmModalUserOptions
-			) => modalConfirm(userOptions),
-
-			hideModal: (
-				index = modalStack.length - 1
-			) => { hideModal(index) },
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
+
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
+
+			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
+
+			hideModal: (index = modalStack.length - 1) => { hideModal(index) },
 		})
 
 		const ModalComponent = defineComponent({
 			data: () => ({ modalStack }),
 			render() {
-				return this.modalStack.map((
-					modal: ModalComponentProps,
-					index: number
-				) => {
+				return this.modalStack.map((modal, index) => {
 					const props = {
 						...modal.modalOptions,
 						'visible': true,
-						'onUpdate:visible': () => { hideModal(index) }
+						'onUpdate:visible': () => { hideModal(index) },
 					}
-
-					if (modal.modalType === 'modalForm') {
-						return h(ModalForm, props as ModalFormOptions, modal.componentSlots)
+					switch (modal.modalType) {
+						case 'modalForm':
+							return h(ModalForm, props as ModalFormOptions, modal.componentSlots)
+						case 'confirmModal':
+							return h(ModalConfirm, props as ModalConfirmOptions, {})
+						default:
+							return h(Modal, props, modal.componentSlots)
 					}
-
-					if (modal.modalType === 'confirm') {
-						return h(ModalConfirm, props as any, {})
-					}
-
-					return h(Modal, props, modal.componentSlots)
 				})
 			},
 		})
+
 		app.component('ModalContainer', ModalComponent)
 	},
 }

package/src/styles/appearance.css

@@ -42,6 +42,11 @@
     opacity: 1;
 }
 
+.-z-index-1,
+.-z-1 {
+    z-index: -1;
+}
+
 .z-index-0,
 .z-0 {
     z-index: 0;
@@ -477,6 +482,10 @@
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
 
+.shadow-txt {
+    filter: drop-shadow(0 0 10px var(--bgl-black-tint));
+}
+
 .border-bottom {
     border-bottom: 1px solid var(--border-color)
 }
@@ -603,6 +612,11 @@
         opacity: 1;
     }
 
+    .m_-z-index-1,
+    .m_-z-1 {
+        z-index: -1;
+    }
+
     .m_z-index-0,
     .m_z-0 {
         z-index: 0;

package/src/styles/inputs.css

@@ -231,6 +231,11 @@ select {
     width: 100%;
 }
 
+[dir='rtl'] .bagel-input input[type="email"] {
+    direction: ltr;
+    text-align: right;
+}
+
 .input.active .bagel-input input:focus-visible,
 .bagel-input select:focus-visible,
 .bagel-input textarea:focus-visible,
@@ -246,6 +251,8 @@ select {
 .bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
     outline-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 0 10px #00000012;
+
 }
 
 .bagel-input.light-input input,

package/src/styles/text.css

@@ -99,6 +99,47 @@
     font-size: 72px;
 }
 
+.txt80,
+.txt-80 {
+    font-size: 80px;
+}
+
+.txt90,
+.txt-90 {
+    font-size: 90px;
+}
+
+.txt100,
+.txt-100 {
+    font-size: 100px;
+}
+
+
+.txt110,
+.txt-110 {
+    font-size: 110px;
+}
+
+.txt120,
+.txt-120 {
+    font-size: 120px;
+}
+
+.txt130,
+.txt-130 {
+    font-size: 130px;
+}
+
+.txt140,
+.txt-140 {
+    font-size: 140px;
+}
+
+.txt150,
+.txt-150 {
+    font-size: 150px;
+}
+
 
 .txt18,
 .txt-18 {
@@ -481,6 +522,47 @@
     }
 
 
+    .m_txt80,
+    .m_txt-80 {
+        font-size: 80px;
+    }
+
+    .m_txt90,
+    .m_txt-90 {
+        font-size: 90px;
+    }
+
+    .m_txt100,
+    .m_txt-100 {
+        font-size: 100px;
+    }
+
+
+    .m_txt110,
+    .m_txt-110 {
+        font-size: 110px;
+    }
+
+    .m_txt120,
+    .m_txt-120 {
+        font-size: 120px;
+    }
+
+    .m_txt130,
+    .m_txt-130 {
+        font-size: 130px;
+    }
+
+    .m_txt140,
+    .m_txt-140 {
+        font-size: 140px;
+    }
+
+    .m_txt150,
+    .m_txt-150 {
+        font-size: 150px;
+    }
+
     .m_txt18,
     .m_txt-18 {
         font-size: 18px;

package/src/styles/theme.css

@@ -33,7 +33,7 @@
     --bgl-dark-bg: rgba(0, 0, 0, 0.7);
     --bgl-selection-bg: var(--bgl-blue-dark);
     --bgl-selection-color: var(--bgl-white);
-    --bgl-scrollbar-thumb: var(var(--bgl-gray));
+    --bgl-scrollbar-thumb: var(--bgl-gray);
 }
 
 /* TYPE */