@bagelink/vue 0.0.738 → 0.0.742

package/dist/utils/index.d.ts

@@ -13,4 +13,6 @@ export { formatString } from './strings';
 export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
+export declare const sleep: (ms?: number) => Promise<unknown>;
+export declare function appendScript(src: string): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.738",
+  "version": "0.0.742",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,9 +51,10 @@
     "./vite.config.ts"
   ],
   "devDependencies": {
+    "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^1.0.3",
-    "vue": "^3.4.38"
+    "vue": "^3.5.1"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -115,11 +116,11 @@
     "@tiptap/vue-3": "^2.6.6",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^11.0.3",
-    "axios": "^1.7.5",
+    "axios": "^1.7.7",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.11.7",
     "signature_pad": "^5.0.3",
-    "type-fest": "^4.25.0"
+    "type-fest": "^4.26.0"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/AddressSearch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Dropdown, ListItem, ListView, TextInput } from '@bagelink/vue'
+
+const emit = defineEmits(['addressSelected'])
+let addressInput = $ref('')
+let searchResults = $ref<any[]>([])
+
+type MapMarker = {
+	lat: number
+	lon: number
+} | [number, number]
+
+const suggestion = $ref<typeof Dropdown>()
+function emitAddress(address: MapMarker) {
+	emit('addressSelected', address)
+	searchResults = []
+	addressInput = ''
+}
+
+async function searchAddresses() {
+	const addressURL = addressInput.replace(/\s+/g, '+')
+	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
+	const res = await fetch(geocodeUrl)
+	searchResults = await res.json() || []
+	console.log(suggestion)
+	suggestion?.show()
+}
+</script>
+
+<template>
+	<div class="relative">
+		<Dropdown ref="suggestion" :noAutoFocus="true" placement="bottom-start">
+			<TextInput v-model="addressInput" placeholder="Enter address" @debounce="searchAddresses" />
+			<template #popper>
+				<ListView class="-mt-2 hm-300px">
+					<ListItem v-for="(result, index) in searchResults" :key="index" icon="location_on" :title="result.display_name" @click="emitAddress(result)" />
+				</listview>
+			</template>
+		</Dropdown>
+	</div>
+</template>

package/src/components/Avatar.vue

@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 	<div class="avatar flex justify-content-center" :style="{ width: `${size}px`, height: `${size}px` }">
 		<img v-if="src" :src="src" :alt="name">
 		<p v-else :style="{ 'line-height': `${size}px`, 'font-size': `calc(1.5rem * ${size} / 50)` }">
-			{{ fallback || initials(name || '') }}
+			{{ (fallback || initials(name || '')).toUpperCase() }}
 		</p>
 	</div>
 </template>

package/src/components/Badge.vue

@@ -45,7 +45,7 @@ const props = defineProps<Props>()
 }
 
 .pill.blue {
-	background: var(--bgl-primary);
+	background: var(bgl-primary);
 	color: var(--bgl-white);
 }
 

package/src/components/Btn.vue

@@ -56,7 +56,7 @@ const computedTheme = $computed(
 const computedDefaultColors = $computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+		color: props.flat ? 'var(--bgl-text-color)' : 'var(--bgl-light-text)',
 	}),
 )
 
@@ -121,8 +121,8 @@ a {
 }
 
 .loading {
-  border: 1px solid var(--bgl-white);
-  border-bottom: 2px solid var(--bgl-white);
+  border: 1px solid var(--bgl-light-text);
+  border-bottom: 2px solid var(--bgl-light-text);
   animation: spin 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
@@ -146,7 +146,7 @@ a {
   border-radius: 100%;
   font-size: 1rem;
   background: var(--bgl-primary);
-  color: var(--bgl-white);
+  color: var(--bgl-light-text);
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
@@ -205,12 +205,14 @@ a {
 .bgl_btn-icon.bgl_flatBtn:hover {
   filter: var(--bgl-hover-filter);
   background: var(--bgl-gray-20);
+  color: var(--bgl-primary);
 }
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
   background: var(--bgl-gray-40);
   filter: var(--bgl-active-filter);
+  color: var(--bgl-primary);
 }
 
 .bgl_btn.bgl_flatBtn.red,
@@ -219,7 +221,7 @@ a {
 }
 .bgl_btn.bgl_flatBtn.white,
 .bgl_btn-icon.bgl_flatBtn.white {
-  color: var(--bgl-white);
+  color: var(--bgl-light-text);
 }
 
 .bgl_btn.bgl_flatBtn.light,
@@ -229,7 +231,7 @@ a {
 
 .bgl_btn.bgl_flatBtn.black,
 .bgl_btn-icon.bgl_flatBtn.black {
-  color: var(--bgl-black);
+  color: var(--bgl-text-color);
 }
 
 .bgl_btn.bgl_flatBtn.gray,
@@ -267,7 +269,7 @@ a {
 }
 
 .bgl_btn-border:hover {
-  color: var(--bgl-white);
+  color: var(--bgl-light-text);
   background: v-bind(computedBackgroundColor);
   filter: brightness(100%);
 }

package/src/components/Card.vue

@@ -59,7 +59,7 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 .border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background:var(--bgl-white);
+	background:var(--bgl-box-bg);
 	padding: 0 0.75rem;
 	position: absolute;
 	top: -0.5rem;
@@ -72,7 +72,7 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 
 .bgl_card {
 	border-radius: var(--card-border-radius);
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	padding: 2rem 2rem;
 	position: relative;
 }

package/src/components/ListItem.vue

@@ -46,7 +46,7 @@ defineProps<{
 	margin: 0rem 0;
 	cursor: pointer;
 	transition: var(--bgl-transition);
-	color: var(--bgl-black);
+	color: var(--bgl-text-color);
 	text-decoration: none;
 	position: relative;
 }

package/src/components/MapEmbed.vue

@@ -1,126 +1,165 @@
 <script setup lang="ts">
-// import 'leaflet/dist/leaflet.css'
-// import type { LatLngExpression, Layer, Marker } from 'leaflet'
-// import { onMounted, watch } from 'vue'
-// import L from 'leaflet'
-
-// const props = withDefaults(defineProps<{
-// 	center: LatLngExpression
-// 	zoom: number
-// 	height: number
-// 	address: string
-// 	zoomControl: boolean
-// }>(), {
-// 	center: () => [31.7683, 35.2137],
-// 	zoom: 13,
-// 	height: 400,
-// 	address: '',
-// 	zoomControl: true
-// })
-
-// let map = $ref<L.Map>()
-// const markers = $ref<Marker[]>([])
-// const id = $ref(Math.random().toString(36).substring(2, 10))
-
-// function initializeMap() {
-// 	if (props.address) {
-// 		geocodeAddress(props.address).catch(console.error)
-// 	}
-// 	map = L.map(id, {
-// 		center: props.center,
-// 		zoom: props.zoom,
-// 		zoomControl: props.zoomControl
-// 	})
-// 	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
-// }
-
-// onMounted(initializeMap)
-// // eslint-disable-next-line max-len
-// const markerSVG = '<svg width="284" height="284" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M29.859 29.266A99 99 0 0 1 198.862 99.27c0 74.25-99 183.857-99 183.857s-99-109.607-99-183.858A99 99 0 0 1 29.86 29.266Zm70.004 118.961c25.513 0 46.195-20.683 46.195-46.196 0-25.513-20.682-46.195-46.195-46.195S53.667 76.518 53.667 102.03s20.683 46.196 46.196 46.196Z" fill="#F04033"/></svg>'
-
-// function addMarker(latlng: LatLngExpression) {
-// 	const customIcon = L.icon({
-// 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
-// 		iconSize: [32, 32],
-// 	})
-
-// 	if (!map) initializeMap()
-// 	const marker = L.marker(latlng, { icon: customIcon }).addTo(map as L.Map)
-// 	markers.push(marker)
-// }
-
-// async function geocodeAddress(address: string) {
-// 	const addressURL = address.replace(/\s+/g, '+')
-// 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
-// 	const res = await fetch(geocodeUrl)
-// 	const data: any[] = await res.json() || []
-// 	data.forEach((element) => {
-// 		addMarker([element.lat, element.lon])
-// 	})
-// 	map?.fitBounds(L.featureGroup(markers as unknown as Layer[]).getBounds())
-// }
-
-// watch(() => props.address, (address) => {
-// 	if (address) geocodeAddress(address).catch(console.error)
-// }, { immediate: true })
+import './leaflet/leaflet.css'
+import { onMounted, watch } from 'vue'
+import type { LatLngExpression, Layer, Map, Marker } from 'leaflet'
+import { appendScript, sleep } from '@bagelink/vue'
+
+type MapMarker = {
+	lat: number
+	lon: number
+} | [number, number]
+
+const props = withDefaults(
+	defineProps<{
+		center?: LatLngExpression
+		zoom?: number
+		height?: number
+		zoomControl?: boolean
+		markers?: MapMarker[]
+		markerIcon?: string
+	}>(),
+	{
+		center: () => [31.7683, 35.2137],
+		zoom: 13,
+		height: 400,
+		zoomControl: true,
+		markerIcon: '',
+	}
+)
+
+let L = $ref<any>()
+let map = $ref<Map>()
+const _markers = $ref<Marker[]>([])
+const id = $ref(Math.random().toString(36).substring(2, 10))
+
+const defaultMarkerSVG = '<svg id="eCJDQPwuXje1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" project-id="ac827abc0a8c4922b76bac4df7bd7646" export-id="2cc86932ccbc4825a31fd063b3e75478" cached="false"><style><![CDATA[#eCJDQPwuXje3_ts {animation: eCJDQPwuXje3_ts__ts 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_ts__ts { 0% {transform: translate(18px,18px) scale(1,1)} 3.333333% {transform: translate(18px,18px) scale(1,1);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {transform: translate(18px,18px) scale(1.8,1.8)}} #eCJDQPwuXje3 {animation: eCJDQPwuXje3_c_o 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_c_o { 0% {opacity: 0} 3.333333% {opacity: 1;animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {opacity: 0}}]]></style><ellipse rx="10.049312" ry="10.049312" transform="translate(18 18)" fill="#2e5bff" stroke-width="0"/><g id="eCJDQPwuXje3_ts" transform="translate(18,18) scale(1,1)"><ellipse id="eCJDQPwuXje3" rx="10.049312" ry="10.049312" transform="translate(0,0)" opacity="0" fill="#2e5bff" stroke-width="0"/></g></svg>'
+const leafletScriptUrl = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+
+function loadGlobalL() {
+	return new Promise(async (resolve) => {
+		while (!window.L) await sleep(100)
+		resolve(window.L)
+	})
+}
+
+async function initializeMap() {
+	await appendScript(leafletScriptUrl)
+	L = await loadGlobalL()
+	if (!map) {
+		map = L.map(id, {
+			center: props.center,
+			zoom: props.zoom,
+			zoomControl: props.zoomControl,
+		})
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
+	}
+}
+
+function addMarker(L: any, latlng: LatLngExpression) {
+	const iconSVG = props.markerIcon || defaultMarkerSVG
+	const customIcon = L.icon({
+		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(iconSVG)}`,
+		iconSize: [32, 32],
+	})
+
+	const marker = L.marker(latlng, { icon: customIcon }).addTo(map as Map)
+	_markers.push(marker)
+}
+
+function fitMarkers(L: any) {
+	if (_markers.length > 0) {
+		map?.fitBounds(L.featureGroup(_markers as unknown as Layer[]).getBounds())
+	}
+}
+
+watch(
+	() => props.markers,
+	async (markers) => {
+		_markers.forEach(marker => marker.remove())
+		if (!markers) return
+		for (const marker of markers) {
+			const [lat, lon] = Array.isArray(marker) ? marker : [marker.lat, marker.lon]
+			if (!map) initializeMap()
+			addMarker(L, [lat, lon])
+			fitMarkers(L)
+		}
+	},
+	{ immediate: true }
+)
+
+onMounted(initializeMap)
 </script>
 
 <template>
-	<div class="map-test" />
-	<!-- <div :id class="map" :style="{ height: `${height || 400}px` }" /> -->
+	<div :id="id" class="leaflet-map" :style="{ height: `${props.height || 400}px` }" />
 </template>
 
-  <style>
-  #map {
-    height: 100%;
-	border-radius: var(--input-border-radius);
-	position: relative;
+<style>
+.leaflet-map {
+  height: 100%;
+  border-radius: var(--input-border-radius);
+  position: relative;
+  background: var(--bgl-bg)
+}
+
+.leaflet-map::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 10px #00000012;
+  z-index: 402;
+}
+
+.leaflet-map .leaflet-pane .leaflet-tile-pane {
+  filter: contrast(0.6) brightness(1.25) hue-rotate(12deg);
+}
 
+.leaflet-control-attribution {
+  display: none;
 }
-#map::after{
-	content: "";
-	position: absolute;
-	inset: 0;
-    box-shadow: inset 0 0 10px #00000012;
-	z-index: 402;
-  }
 
-  .map .leaflet-pane .leaflet-tile-pane{
-	filter: contrast(0.6) brightness(1.25) hue-rotate(12deg);
+.leaflet-pane.leaflet-marker-pane img {
+  filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
+}
 
-  }
-  .leaflet-control-attribution{
-	display: none;
-  }
-  .leaflet-pane.leaflet-marker-pane img{
-	filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
-  }
-  .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
-    font-size: var(--input-font-size);
+.leaflet-touch .leaflet-control-zoom-in,
+.leaflet-touch .leaflet-control-zoom-out {
+  font-size: var(--input-font-size);
 }
-.leaflet-bar{
-    border-radius:var(--input-border-radius) !important;
+
+.leaflet-bar {
+  border-radius: var(--input-border-radius) !important;
 }
 
 .leaflet-touch .leaflet-bar a:first-child {
-    border-top-left-radius: calc(var(--input-border-radius) - 2px) !important;
-    border-top-right-radius: calc(var(--input-border-radius) - 2px) !important;
-}
-.leaflet-touch .leaflet-bar a:last-child{
-	border-bottom-left-radius:calc(var(--input-border-radius) - 2px) !important;
-    border-bottom-right-radius:calc(var(--input-border-radius) - 2px) !important;
+  border-top-left-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-top-right-radius: calc(var(--input-border-radius) - 2px) !important;
 }
 
-.leaflet-bar a{
-	background: var(--input-bg) !important;
-	transition: var(--bgl-transition);
+.leaflet-touch .leaflet-bar a:last-child {
+  border-bottom-left-radius: calc(var(--input-border-radius) - 2px) !important;
+  border-bottom-right-radius: calc(var(--input-border-radius) - 2px) !important;
+}
 
+.leaflet-bar a {
+  background: var(--bgl-box-bg) !important;
+  transition: var(--bgl-transition);
+  border-bottom: 1px solid var(--border-color) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1 !important;
+  padding-bottom: 2px;
 }
-.leaflet-bar a:hover{
-	filter: var(--bgl-hover-filter);
+.leaflet-bar a:last-child {
+	border-bottom: none !important;
 }
-.leaflet-bar a:focus {
-	filter: var(--bgl-active-filter);
 
+.leaflet-bar a:hover {
+  filter: var(--bgl-hover-filter);
+}
+
+.leaflet-bar a:focus {
+  filter: var(--bgl-active-filter);
 }
 </style>

package/src/components/Modal.vue

@@ -85,9 +85,9 @@ onUnmounted(() => {
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
 
-			<div v-else class="sticky bg-white z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
+			<div v-else class="sticky bg-popup z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
-					class="color-black position-start"
+					class="position-start"
 					icon="close"
 					thin
 					color="white"
@@ -110,6 +110,9 @@ onUnmounted(() => {
 </template>
 
 <style>
+.modal{
+	color: var(--bgl-popup-text);
+}
 .modal-title {
 	text-align: center;
 	font-weight: 600;

package/src/components/ModalConfirm.vue

@@ -2,8 +2,8 @@
 import { Btn, Modal } from '@bagelink/vue'
 
 const props = defineProps<{
-	title: string
-	message: string
+	title?: string
+	message?: string
 	resolve: (value: boolean) => void
 }>()
 
@@ -16,11 +16,8 @@ function select(val: boolean) {
 </script>
 
 <template>
-	<Modal width="380px" :dismissable="false" class="color-black txt-center">
-		<h3 class="m-0">
-			{{ title }}
-		</h3>
-		<p class="px-1 py-1 pretty m-0">
+	<Modal :title="title" width="380px" :dismissable="false" class="txt-center">
+		<p class="pb-05 pretty">
 			{{ message }}
 		</p>
 		<template #footer>

package/src/components/NavBar.vue

@@ -84,7 +84,7 @@ const isOpen = $ref(!isSmallScreen)
 .nav-expend {
 	text-align: center;
 	cursor: pointer;
-	background: var(--bgl-white);
+	background: var(--bgl-popup-bg);
 	color: var(--bgl-primary);
 	display: flex;
 	border-radius: 100%;
@@ -109,7 +109,7 @@ const isOpen = $ref(!isSmallScreen)
 */
 
 .nav-expend {
-	background: var(--bgl-white);
+	background: var(--bgl-popup-bg);
 }
 
 .nav-expend:hover {
@@ -122,7 +122,7 @@ const isOpen = $ref(!isSmallScreen)
 }
 
 .nav {
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 	background: var(--bgl-primary);
 	z-index: 100;
 	width: 70px;
@@ -142,7 +142,7 @@ const isOpen = $ref(!isSmallScreen)
 	text-align: start;
 	align-items: center;
 	position: relative;
-	color: var(--bgl-white);
+	color: var(--bgl-light-text);
 	transition: all 0.2s ease;
 	pointer-events: none;
 }
@@ -168,7 +168,7 @@ const isOpen = $ref(!isSmallScreen)
 
 .nav-button:hover .bgl_icon-font,
 .nav-button.router-link-active .bgl_icon-font {
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	color: var(--bgl-primary);
 }
 
@@ -178,7 +178,7 @@ const isOpen = $ref(!isSmallScreen)
 }
 
 .tooltip {
-	background-color: var(--bgl-white);
+	background-color: var(--bgl-popup-bg);
 	color: var(--bgl-primary);
 	line-height: 1;
 	padding: 0.5rem;
@@ -255,7 +255,7 @@ const isOpen = $ref(!isSmallScreen)
 
 	.nav.open .tooltip {
 		background-color: transparent;
-		color: var(--bgl-white);
+		color: var(--bgl-light-text);
 		padding: 0;
 		box-shadow: none;
 		pointer-events: all;
@@ -278,7 +278,7 @@ const isOpen = $ref(!isSmallScreen)
 
 	.nav.open .nav-button:hover,
 	.nav.open .nav-button.router-link-active {
-		background: var(--bgl-white);
+		background: var(--bgl-popup-bg);
 		color: var(--bgl-primary);
 	}
 
@@ -316,7 +316,7 @@ const isOpen = $ref(!isSmallScreen)
 	.tooltip {
 		opacity: 1;
 		background: transparent;
-		color: var(--bgl-white);
+		color: var(--bgl-light-text);
 		box-shadow: none;
 		font-size: 10px;
 		padding: 0;

package/src/components/TableSchema.vue

@@ -333,7 +333,7 @@ th {
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	height: v-bind(computedItemHiehgt);
 	vertical-align: bottom;
 	font-weight: 400;
@@ -356,7 +356,7 @@ th {
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
 
@@ -371,7 +371,7 @@ th {
 
 .first-row .col {
 	cursor: pointer;
-	background: var(--bgl-white);
+	background: var(--bgl-box-bg);
 }
 
 .col {

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

@@ -21,7 +21,7 @@ const val = defineModel<boolean>('modelValue', { default: false })
   align-items: center;
   cursor: pointer;
   border-radius: 100%;
-  background: var(--bgl-white);
+  background: var(--bgl-box-bg);
   border: 2px solid var(--bgl-gray);
 }