@bagelink/vue 0.0.1246 → 0.0.1252

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1246",
+  "version": "0.0.1252",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -19,16 +19,16 @@ declare global {
 
 const props = defineProps<ImageProps>()
 
-let imageSrc = $ref<string | null>(null)
+let imageSrc = $ref<string | undefined>(undefined)
 let loadingError = $ref(false)
 
-function getImageUrl(): string | null {
-	if (!props.src && !props.pathKey) return null
+function getImageUrl(): string | undefined {
+	if (!props.src && !props.pathKey) return
 	return pathKeyToURL(props.src || props.pathKey)
 }
 
-async function getCachedImage(url: string): Promise<string | null> {
-	if (!('caches' in window)) return null
+async function getCachedImage(url: string): Promise<string | undefined> {
+	if (!('caches' in window)) return undefined
 	try {
 		const imgCache = await window.caches.open('img-cache')
 		const cachedResponse = await imgCache.match(url)
@@ -38,7 +38,7 @@ async function getCachedImage(url: string): Promise<string | null> {
 	} catch (error) {
 		console.warn('Cache access error:', error)
 	}
-	return null
+	return undefined
 }
 
 async function cacheImage(url: string, blob: Blob) {
@@ -64,7 +64,7 @@ async function loadImage() {
 	loadingError = false
 	const url = getImageUrl()
 	if (!url) {
-		imageSrc = null
+		imageSrc = undefined
 		return
 	}
 
@@ -84,7 +84,7 @@ async function loadImage() {
 	} catch (error) {
 		console.error('Image loading error:', error)
 		loadingError = true
-		imageSrc = null
+		imageSrc = undefined
 	}
 }
 

package/src/components/lightbox/Lightbox.vue

@@ -194,6 +194,9 @@ defineExpose({ open, close })
 </template>
 
 <style scoped>
+.bgl-lightbox:has(.bgl_vid) {
+	width: 90vw;
+}
 .lightbox-image{
 	object-fit: contain;
 }

package/src/styles/appearance.css

@@ -479,6 +479,202 @@
     color: var(--bgl-green) !important;
 }
 
+.color-red-light {
+    color: var(--bgl-red-light) !important;
+}
+
+.bg-red-light {
+    background: var(--bgl-red-light) !important;
+}
+
+.color-purple {
+    color: var(--bgl-purple) !important;
+}
+
+.bg-purple {
+    background: var(--bgl-purple) !important;
+}
+
+.color-purple-light {
+    color: var(--bgl-purple-light) !important;
+}
+
+.bg-purple-light {
+    background: var(--bgl-purple-light) !important;
+}
+
+.color-brown {
+    color: var(--bgl-brown) !important;
+}
+
+.bg-brown {
+    background: var(--bgl-brown) !important;
+}
+
+.color-brown-light {
+    color: var(--bgl-brown-light) !important;
+}
+
+.bg-brown-light {
+    background: var(--bgl-brown-light) !important;
+}
+
+.color-orange {
+    color: var(--bgl-orange) !important;
+}
+
+.bg-orange {
+    background: var(--bgl-orange) !important;
+}
+
+.color-orange-light {
+    color: var(--bgl-orange-light) !important;
+}
+
+.bg-orange-light {
+    background: var(--bgl-orange-light) !important;
+}
+
+.color-turquoise {
+    color: var(--bgl-turquoise) !important;
+}
+
+.bg-turquoise {
+    background: var(--bgl-turquoise) !important;
+}
+
+.color-turquoise-light {
+    color: var(--bgl-turquoise-light) !important;
+}
+
+.bg-turquoise-light {
+    background: var(--bgl-turquoise-light) !important;
+}
+
+.color-whatsapp-gray {
+    color: var(--whatsapp-gray) !important;
+}
+
+.bg-whatsapp-gray {
+    background: var(--whatsapp-gray) !important;
+}
+
+.color-input-red input {
+    color: var(--bgl-red) !important;
+}
+
+.bg-input-red input,
+.bg-input-red .selectinput-btn {
+    background: var(--bgl-red) !important;
+}
+
+.color-input-red-light input {
+    color: var(--bgl-red-light) !important;
+}
+
+.bg-input-red-light input,
+.bg-input-red-light .selectinput-btn {
+    background: var(--bgl-red-light) !important;
+}
+
+.color-input-purple input {
+    color: var(--bgl-purple) !important;
+}
+
+.bg-input-purple input,
+.bg-input-purple .selectinput-btn {
+    background: var(--bgl-purple) !important;
+}
+
+.color-input-purple-light input {
+    color: var(--bgl-purple-light) !important;
+}
+
+.bg-input-purple-light input,
+.bg-input-purple-light .selectinput-btn {
+    background: var(--bgl-purple-light) !important;
+}
+
+.color-input-brown input {
+    color: var(--bgl-brown) !important;
+}
+
+.bg-input-brown input,
+.bg-input-brown .selectinput-btn {
+    background: var(--bgl-brown) !important;
+}
+
+.color-input-brown-light input {
+    color: var(--bgl-brown-light) !important;
+}
+
+.bg-input-brown-light input,
+.bg-input-brown-light .selectinput-btn {
+    background: var(--bgl-brown-light) !important;
+}
+
+.color-input-orange input {
+    color: var(--bgl-orange) !important;
+}
+
+.bg-input-orange input,
+.bg-input-orange .selectinput-btn {
+    background: var(--bgl-orange) !important;
+}
+
+.color-input-orange-light input {
+    color: var(--bgl-orange-light) !important;
+}
+
+.bg-input-orange-light input,
+.bg-input-orange-light .selectinput-btn {
+    background: var(--bgl-orange-light) !important;
+}
+
+.color-input-turquoise input {
+    color: var(--bgl-turquoise) !important;
+}
+
+.bg-input-turquoise input,
+.bg-input-turquoise .selectinput-btn {
+    background: var(--bgl-turquoise) !important;
+}
+
+.color-input-turquoise-light input {
+    color: var(--bgl-turquoise-light) !important;
+}
+
+.bg-input-turquoise-light input,
+.bg-input-turquoise-light .selectinput-btn {
+    background: var(--bgl-turquoise-light) !important;
+}
+
+.color-input-whatsapp-gray input {
+    color: var(--whatsapp-gray) !important;
+}
+
+.bg-input-whatsapp-gray input,
+.bg-input-whatsapp-gray .selectinput-btn {
+    background: var(--whatsapp-gray) !important;
+}
+
+.color-input-whatsapp-green input {
+    color: var(--whatsapp-green) !important;
+}
+
+.bg-input-whatsapp-green input,
+.bg-input-whatsapp-green .selectinput-btn {
+    background: var(--whatsapp-green) !important;
+}
+
+.color-input-whatsapp-blue input {
+    color: var(--whatsapp-blue) !important;
+}
+
+.bg-input-whatsapp-blue input,
+.bg-input-whatsapp-blue .selectinput-btn {
+    background: var(--whatsapp-blue) !important;
+}
 
 .cover,
 .object-fit-cover {
@@ -883,6 +1079,203 @@
         color: var(--bgl-green) !important;
     }
 
+    .m_color-red-light {
+        color: var(--bgl-red-light) !important;
+    }
+
+    .m_bg-red-light {
+        background: var(--bgl-red-light) !important;
+    }
+
+    .m_color-purple {
+        color: var(--bgl-purple) !important;
+    }
+
+    .m_bg-purple {
+        background: var(--bgl-purple) !important;
+    }
+
+    .m_color-purple-light {
+        color: var(--bgl-purple-light) !important;
+    }
+
+    .m_bg-purple-light {
+        background: var(--bgl-purple-light) !important;
+    }
+
+    .m_color-brown {
+        color: var(--bgl-brown) !important;
+    }
+
+    .m_bg-brown {
+        background: var(--bgl-brown) !important;
+    }
+
+    .m_color-brown-light {
+        color: var(--bgl-brown-light) !important;
+    }
+
+    .m_bg-brown-light {
+        background: var(--bgl-brown-light) !important;
+    }
+
+    .m_color-orange {
+        color: var(--bgl-orange) !important;
+    }
+
+    .m_bg-orange {
+        background: var(--bgl-orange) !important;
+    }
+
+    .m_color-orange-light {
+        color: var(--bgl-orange-light) !important;
+    }
+
+    .m_bg-orange-light {
+        background: var(--bgl-orange-light) !important;
+    }
+
+    .m_color-turquoise {
+        color: var(--bgl-turquoise) !important;
+    }
+
+    .m_bg-turquoise {
+        background: var(--bgl-turquoise) !important;
+    }
+
+    .m_color-turquoise-light {
+        color: var(--bgl-turquoise-light) !important;
+    }
+
+    .m_bg-turquoise-light {
+        background: var(--bgl-turquoise-light) !important;
+    }
+
+    .m_color-whatsapp-gray {
+        color: var(--whatsapp-gray) !important;
+    }
+
+    .m_bg-whatsapp-gray {
+        background: var(--whatsapp-gray) !important;
+    }
+
+    .m_color-input-red input {
+        color: var(--bgl-red) !important;
+    }
+
+    .m_bg-input-red input,
+    .m_bg-input-red .selectinput-btn {
+        background: var(--bgl-red) !important;
+    }
+
+    .m_color-input-red-light input {
+        color: var(--bgl-red-light) !important;
+    }
+
+    .m_bg-input-red-light input,
+    .m_bg-input-red-light .selectinput-btn {
+        background: var(--bgl-red-light) !important;
+    }
+
+    .m_color-input-purple input {
+        color: var(--bgl-purple) !important;
+    }
+
+    .m_bg-input-purple input,
+    .m_bg-input-purple .selectinput-btn {
+        background: var(--bgl-purple) !important;
+    }
+
+    .m_color-input-purple-light input {
+        color: var(--bgl-purple-light) !important;
+    }
+
+    .m_bg-input-purple-light input,
+    .m_bg-input-purple-light .selectinput-btn {
+        background: var(--bgl-purple-light) !important;
+    }
+
+    .m_color-input-brown input {
+        color: var(--bgl-brown) !important;
+    }
+
+    .m_bg-input-brown input,
+    .m_bg-input-brown .selectinput-btn {
+        background: var(--bgl-brown) !important;
+    }
+
+    .m_color-input-brown-light input {
+        color: var(--bgl-brown-light) !important;
+    }
+
+    .m_bg-input-brown-light input,
+    .m_bg-input-brown-light .selectinput-btn {
+        background: var(--bgl-brown-light) !important;
+    }
+
+    .m_color-input-orange input {
+        color: var(--bgl-orange) !important;
+    }
+
+    .m_bg-input-orange input,
+    .m_bg-input-orange .selectinput-btn {
+        background: var(--bgl-orange) !important;
+    }
+
+    .m_color-input-orange-light input {
+        color: var(--bgl-orange-light) !important;
+    }
+
+    .m_bg-input-orange-light input,
+    .m_bg-input-orange-light .selectinput-btn {
+        background: var(--bgl-orange-light) !important;
+    }
+
+    .m_color-input-turquoise input {
+        color: var(--bgl-turquoise) !important;
+    }
+
+    .m_bg-input-turquoise input,
+    .m_bg-input-turquoise .selectinput-btn {
+        background: var(--bgl-turquoise) !important;
+    }
+
+    .m_color-input-turquoise-light input {
+        color: var(--bgl-turquoise-light) !important;
+    }
+
+    .m_bg-input-turquoise-light input,
+    .m_bg-input-turquoise-light .selectinput-btn {
+        background: var(--bgl-turquoise-light) !important;
+    }
+
+    .m_color-input-whatsapp-gray input {
+        color: var(--whatsapp-gray) !important;
+    }
+
+    .m_bg-input-whatsapp-gray input,
+    .m_bg-input-whatsapp-gray .selectinput-btn {
+        background: var(--whatsapp-gray) !important;
+    }
+
+    .m_color-input-whatsapp-green input {
+        color: var(--whatsapp-green) !important;
+    }
+
+    .m_bg-input-whatsapp-green input,
+    .m_bg-input-whatsapp-green .selectinput-btn {
+        background: var(--whatsapp-green) !important;
+    }
+
+    .m_color-input-whatsapp-blue input {
+        color: var(--whatsapp-blue) !important;
+    }
+
+    .m_bg-input-whatsapp-blue input,
+    .m_bg-input-whatsapp-blue .selectinput-btn {
+        background: var(--whatsapp-blue) !important;
+    }
+
     .m_bg-transparent {
         background: transparent !important;
     }

package/src/styles/layout.css

@@ -43,7 +43,9 @@
 }
 
 
-.round-none {
+.round-none,
+.radius-0,
+.radius-none {
     border-radius: 0 !important;
 }
 
@@ -679,6 +681,10 @@
     top: 10rem;
 }
 
+.top-50p {
+    top: 50p;
+}
+
 .-top-025 {
     top: -0.25rem;
 }

package/src/styles/mobilLayout.css

@@ -72,7 +72,9 @@
         border-radius: calc(var(--btn-border-radius) * 4) !important;
     }
 
-    .m_round-none {
+    .m_round-none,
+    .m_radius-0,
+    .m_radius-none {
         border-radius: 0 !important;
     }
 
@@ -5474,6 +5476,10 @@
         top: -10rem !important;
     }
 
+    .m_top-50p {
+        top: 50p;
+    }
+
     .m_bottom,
     .m_bottom-0 {
         bottom: 0 !important;