@bagelink/vue 0.0.736 → 0.0.740

package/src/components/lightbox/Lightbox.vue

@@ -13,7 +13,7 @@ function open(item: LightboxItem, groupItems: LightboxItem[] = []) {
 	currentItem = item
 	if (!groupItems.length) return
 	group = groupItems
-	currentIndex = groupItems.indexOf(item)
+	currentIndex = groupItems.findIndex(({ src }) => item.src === src)
 	document.addEventListener('keydown', handleKeydown)
 }
 
@@ -75,17 +75,30 @@ defineExpose({ open, close })
 			@keydown.right="next"
 			@click="close"
 		>
-			<div class="bgl-lightbox relative vw90 txt-center" @click.stop>
+			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute">
+				<Btn
+					class="navigation-btn oval"
+					icon="arrow_back"
+					@click="prev"
+				/>
+				<Btn
+					class="navigation-btn oval"
+					icon="arrow_forward"
+					@click="next"
+				/>
+			</div>
+			<div class="bgl-lightbox relative txt-center" @click.stop>
 				<Btn flat class="fixed top-1 end-1 color-white" icon="close" @click="close" />
 				<div class="bgl-lightbox-item">
 					<template v-if="currentItem?.type === 'image'">
-						<img :src="currentItem?.src" alt="Preview">
+						<img :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image">
 					</template>
 					<template v-else-if="currentItem?.type === 'video'">
 						<BglVideo
 							:src="currentItem?.src"
 							autoplay
 							controls
+							class="vw90"
 						/>
 					</template>
 					<template v-else-if="currentItem?.type === 'pdf'">
@@ -95,6 +108,7 @@ defineExpose({ open, close })
 							width="100%"
 							height="1080"
 							:title="currentItem?.name"
+							class="vw90"
 						>
 					</template>
 					<template v-else>
@@ -105,22 +119,10 @@ defineExpose({ open, close })
 						</div>
 					</template>
 				</div>
-				<div v-if="group && group.length > 1" class="navigation flex space-between w-100 absolute">
-					<Btn
-						class="navigation-btn oval user-select-none"
-						icon="arrow_back"
-						@click="prev"
-					/>
-					<Btn
-						class="navigation-btn oval user-select-none"
-						icon="arrow_forward"
-						@click="next"
-					/>
-				</div>
 				<div
 					v-if="group && group.length > 1"
 					class="flex justify-content-center mt-2 overflow
-					 p-1 fixed bottom start end gap-1 m_justify-content-start"
+					p-1 fixed bottom start end gap-1 m_justify-content-start"
 				>
 					<template
 						v-for="(item, index) in group"
@@ -129,7 +131,7 @@ defineExpose({ open, close })
 						<img
 							v-if="item.type === 'image'"
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							:src="item.src"
 							alt=""
 							:class="{ active: currentIndex === index }"
@@ -138,7 +140,7 @@ defineExpose({ open, close })
 						<Icon
 							v-else
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							icon="description"
 							:class="{ active: currentIndex === index }"
 							@click="selectItem(index)"
@@ -151,6 +153,10 @@ defineExpose({ open, close })
 </template>
 
 <style scoped>
+.lightbox-image{
+	object-fit: contain;
+}
+
 .bgl-lightbox-overlay {
 	background: rgba(0, 0, 0, 0.8);
 }

package/src/styles/appearance.css

@@ -108,6 +108,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;
 }
@@ -657,6 +665,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 {
@@ -252,7 +252,7 @@ select {
 .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 +261,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

@@ -263,6 +263,10 @@
     line-height: 2;
 }
 
+.line-height-normal {
+    line-height: normal;
+}
+
 .ellipsis {
     overflow: hidden;
     display: block;
@@ -640,6 +644,10 @@
         line-height: 2;
     }
 
+    .m_line-height-normal {
+        line-height: normal;
+    }
+
     .m_ellipsis {
         overflow: hidden;
         display: block;

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(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)
+	})
+}