@bagelink/vue 0.0.738 → 0.0.742

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;
@@ -108,6 +113,14 @@
     color: var(--bgl-white) !important;
 }
 
+.bg-popup {
+    background: var(--bgl-popup-bg) !important;
+}
+
+.color-popup {
+    color: var(--bgl-popup-bg) !important;
+}
+
 .bg-primary {
     background: var(--bgl-primary) !important;
 }
@@ -469,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)
 }
@@ -595,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;
@@ -657,6 +679,14 @@
         color: var(--bgl-white) !important;
     }
 
+    .m_bg-popup {
+        background: var(--bgl-popup-bg) !important;
+    }
+
+    .m_color-popup {
+        color: var(--bgl-popup-bg) !important;
+    }
+
     .m_bg-primary {
         background: var(--bgl-primary) !important;
     }

package/src/styles/bagel.css

@@ -37,11 +37,12 @@ body {
     min-height: 100%;
     background-color: var(--bgl-bg);
     font-family: var(--bgl-font);
-    font-size: 16px;
+    font-size: var(--bgl-font-size);
     font-weight: 400;
     line-height: 1.65;
     width: auto;
     height: auto;
+    color: var(--bgl-text-color);
 }
 
 a {

package/src/styles/inputs.css

@@ -19,7 +19,7 @@ select {
     text-align: start;
     margin-bottom: 0.5rem;
     width: 100%;
-    color: var(--bgl-black);
+    color: var(--bgl-text-color);
 }
 
 .bagel-input::-webkit-input-placeholder .bagel-input label {
@@ -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,13 +251,15 @@ 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,
 .bagel-input.light-input textarea,
 .bagel-input.light-input select,
 .custom-select.light-input .input {
-    background: var(--bgl-white) !important;
+    background: var(--bgl-popup-bg) !important;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     outline: 1px solid var(--border-color) !important;
 }
@@ -261,7 +268,7 @@ select {
 .bagel-input.light-input input:focus-visible,
 .bagel-input.light-input select:focus-visible,
 .bagel-input.light-input textarea:focus-visible {
-    box-shadow: inset 0 0 2px var(--bgl-black) !important;
+    box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
 }
 
 .bagel-input input[type="number"]-webkit-inner-spin-button,

package/src/styles/loginCard.css

@@ -19,7 +19,7 @@
 
 .login-card .forgot-password {
   margin: -5px 0 10px;
-  color: var(--bgl-black);
+  color: var(--bgl-text-color);
   text-decoration: none;
 }
 

package/src/styles/modal.css

@@ -4,7 +4,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--bgl-dark-bg);
     z-index: 999;
     pointer-events: none;
     opacity: 0;
@@ -66,7 +66,7 @@
     padding-top: 0rem;
     top: 0rem;
     z-index: 3;
-    background: var(--bgl-white);
+    background: var(--bgl-popup-bg);
     border-radius: var(--card-border-radius);
 }
 

package/src/styles/scrollbar.css

@@ -6,7 +6,7 @@
 ::-webkit-scrollbar-track {}
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--bgl-gray);
+    background-color: var(--bgl-scrollbar-thumb);
     border-radius: 1rem;
 }
 

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

@@ -1,17 +1,11 @@
-/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
-/*noinspection CssUnknownTarget*/
-/* @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"); */
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
+/* TEHEME */
 :root {
     --bgl-primary: #2e5bff;
     --bgl-primary-tint: #2e5bff80;
     --bgl-primary-light: #eef6ff;
-    --bgl-accent-color:var(--bgl-primary);
-    --bgl-blue-20: rgba(46, 91, 255, 20%);
-    --bgl-blue-dark: #191c30;
-    --bgl-blue-light: #eef6ff;
     --bgl-black: #282929;
     --bgl-black-tint: #28292980;
     --bgl-white: #fff;
@@ -20,35 +14,68 @@
     --bgl-gray-80: #e8ecef;
     --bgl-gray-20: rgba(183, 183, 183, 0.2);
     --bgl-gray-40: rgba(183, 183, 183, 0.4);
-    --bgl-pink: #f1416c;
-    --bgl-red: #ed6c6f;
-    --bgl-red-tint: #fbe2e2;
-    --bgl-yellow: #ffbb00;
-    --bgl-yellow-light: #fff6d5;
-    --bgl-green: #75c98f;
-    --border-color: #00000020;
+    --bgl-accent-color: var(--bgl-primary);
     --bgl-bg: #f4f6fa;
     --bgl-shadow: #4c577d26;
-    --whatsapp-gray: #89959f;
-    --whatsapp-green: #e0fcd6;
-    --whatsapp-blue: #71bce6;
-    --input-border-radius: 7px;
-    --card-border-radius: 12px;
+    --border-color: #00000020;
     --placeholder-color: #00000040;
     --label-color: #00000080;
-    --label-font-size: 12px;
     --input-bg: #f5f8fa;
     --input-color: #000000;
+    --bgl-box-bg: var(--bgl-white);
+    --bgl-popup-bg: var(--bgl-white);
+    --bgl-popup-text: var(--bgl-black);
+    --bgl-text-color: var(--bgl-black);
+    --bgl-light-text: var(--bgl-white);
+    --bgl-richtext-color: var(--bgl-white);
+    --bgl-code-bg: var(--bgl-black);
+    --bgl-code-color: var(--bgl-white);
+    --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(--bgl-gray);
+}
+
+/* TYPE */
+:root {
+    --bgl-font: 'Lexend', 'Ploni', sans-serif;
+    --input-font-size: 16px;
+}
+
+/* DIMENSIONS */
+:root {
+    --bgl-font-size: 16px;
     --input-height: 40px;
-    --input-font-size: 14px;
+    --label-font-size: 12px;
+    --input-border-radius: 7px;
+    --card-border-radius: 12px;
     --btn-border-radius: 10px;
     --btn-padding: 30px;
     --btn-height: 40px;
+}
+
+/* MISC */
+:root {
     --bgl-transition: all 200ms ease;
     --bgl-transition-400: all 400ms ease;
     --bgl-hover-filter: brightness(90%);
     --bgl-active-filter: brightness(70%);
-    --bgl-font: "Lexend", "Ploni", sans-serif;
+}
+
+/* OTHER COLORS */
+:root {
+    --bgl-blue-20: rgba(46, 91, 255, 20%);
+    --bgl-blue-dark: #191c30;
+    --bgl-blue-light: #eef6ff;
+    --bgl-pink: #f1416c;
+    --bgl-red: #ed6c6f;
+    --bgl-red-tint: #fbe2e2;
+    --bgl-yellow: #ffbb00;
+    --bgl-yellow-light: #fff6d5;
+    --bgl-green: #75c98f;
+    --whatsapp-gray: #89959f;
+    --whatsapp-green: #e0fcd6;
+    --whatsapp-blue: #71bce6;
 }
 
 .Vue-Toastification__toast {
@@ -66,20 +93,18 @@
 }
 
 ::-moz-selection {
-    color: var(--bgl-white);
-    background: var(--bgl-blue-dark);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
 ::selection {
-    color: var(--bgl-white);
-    background: var(--bgl-blue-dark);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
-
-
 .popup {
     border-radius: 15px;
-    background: var(--bgl-white);
+    background: var(--bgl-popup-bg);
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
     padding: 2rem;
     min-width: 300px;
@@ -163,9 +188,10 @@
     -moz-column-gap: 1rem;
     column-gap: 1rem;
     grid-template-rows: 1fr;
-    grid-template-areas: "list-view detail-view";
+    grid-template-areas: 'list-view detail-view';
     transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
+    transition:
+        grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
         -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
     transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
@@ -209,9 +235,10 @@
 .table-list-wrap {
     overflow: auto;
 }
-[dir="rtl"] .data-row .bgl_icon-font, 
-[dir="rtl"] .embedded-field .bgl_icon-font {
-	transform: rotateY(180deg) !important;
+
+[dir='rtl'] .data-row .bgl_icon-font,
+[dir='rtl'] .embedded-field .bgl_icon-font {
+    transform: rotateY(180deg) !important;
 }
 
 .copy-url {
@@ -229,13 +256,13 @@
     margin: 0;
     font-size: 12px;
     opacity: 0.8;
-    color: var(--bgl-black);
+    color: var(--bgl-text-color);
     word-break: break-all;
 }
 
 .list-view {
     grid-area: list-view;
-    grid-template-areas: "list-header""list-content";
+    grid-template-areas: 'list-header''list-content';
     grid-template-columns: 1fr;
     overflow-y: auto;
     grid-template-rows: -webkit-max-content 1fr;
@@ -271,7 +298,7 @@
 
     .detail-view-inner {
         border-radius: var(--card-border-radius);
-        background: var(--bgl-white);
+        background: var(--bgl-box-bg);
     }
 
     .detail-view-inner-wrap {
@@ -282,7 +309,7 @@
     }
 
     .detail-view-inner-wrap.bgl_card {
-        background: var(--bgl-white);
+        background: var(--bgl-box-bg);
     }
 
     .bgl_card {
@@ -304,7 +331,7 @@
 
     .popup {
         border-radius: 15px;
-        background: var(--bgl-white);
+        background: var(--bgl-popup-bg);
         box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
         padding: 2rem;
         min-width: 0;

package/src/utils/index.ts

@@ -83,3 +83,19 @@ export function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFo
 		? schema.filter(f => showFields.includes(f.id as string) || !f.id)
 		: schema
 }
+
+export const sleep = (ms: number = 100) => new Promise(resolve => setTimeout(resolve, ms))
+
+export function appendScript(src: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		if (document.querySelector(`script[src="${src}"]`)) {
+			resolve()
+			return
+		}
+		const script = document.createElement('script')
+		script.src = src
+		script.onload = () => { resolve() }
+		script.onerror = reject
+		document.head.appendChild(script)
+	})
+}