@bagelink/vue 0.0.869 → 0.0.875

package/dist/style.css

@@ -1188,83 +1188,6 @@ p {
 	display: block;
 	border-radius: var(--input-border-radius);
 }
-.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
-
-.selectinput[data-v-4d1e8e98] {
-	width: 100%;
-}
-.selectinput-option[data-v-4d1e8e98] {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns:1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
-	margin-block: 0.15rem;
-}
-.selectinput-option .bgl_icon-font[data-v-4d1e8e98]{
-	line-height: normal;
-}
-.selectinput-options.multiselect .selectinput-option[data-v-4d1e8e98] {
-	grid-template-columns: 10px 1fr;
-}
-.selectinput-options[data-v-4d1e8e98] {
-	max-height: 300px;
-	overflow-y: auto;
-}
-.selectinput-option[data-v-4d1e8e98]:hover {
-	background: var(--bgl-gray-20);
-}
-.isEmpty p[data-v-4d1e8e98] {
-	opacity: 0.3;
-}
-.selected[data-v-4d1e8e98]{
-	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-selected);
-}
-
-.bagel-input label {
-	font-size: var(--label-font-size);
-}
-.selectinput-btn {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: var(--input-height);
-	border-radius: var(--input-border-radius);
-	border: none;
-	background: var(--input-bg);
-	padding: 0.7rem;
-	color: var(--input-color);
-	width: 100%;
-	font-family: inherit;
-	font-size: var(--input-font-size);
-}
-.selectinput-btn p{
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.selectinput-btn:disabled {
-	color: var(--input-disabled-color);
-	background-color: transparent;
-}
-.selectinput-btn:focus {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
-}
-.v-popper__arrow-container {
-	display: none;
-}
-.v-popper--theme-dropdown .v-popper__inner {
-	border: none;
-	/* background: transparent; if anyone is changing this please talk to me first*/
-	border-radius: var(--card-border-radius);
-	/* color: var(--input-color); */
-}
 
 @font-face {
     font-family: 'FontWithASyntaxHighlighter';
@@ -1388,6 +1311,83 @@ p {
     border-top: 1px solid #ccc;
   }
 } */
+.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
+
+.selectinput[data-v-4d1e8e98] {
+	width: 100%;
+}
+.selectinput-option[data-v-4d1e8e98] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns:1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-option .bgl_icon-font[data-v-4d1e8e98]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-4d1e8e98] {
+	grid-template-columns: 10px 1fr;
+}
+.selectinput-options[data-v-4d1e8e98] {
+	max-height: 300px;
+	overflow-y: auto;
+}
+.selectinput-option[data-v-4d1e8e98]:hover {
+	background: var(--bgl-gray-20);
+}
+.isEmpty p[data-v-4d1e8e98] {
+	opacity: 0.3;
+}
+.selected[data-v-4d1e8e98]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-selected);
+}
+
+.bagel-input label {
+	font-size: var(--label-font-size);
+}
+.selectinput-btn {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	border: none;
+	background: var(--input-bg);
+	padding: 0.7rem;
+	color: var(--input-color);
+	width: 100%;
+	font-family: inherit;
+	font-size: var(--input-font-size);
+}
+.selectinput-btn p{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.selectinput-btn:disabled {
+	color: var(--input-disabled-color);
+	background-color: transparent;
+}
+.selectinput-btn:focus {
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
+}
+.v-popper__arrow-container {
+	display: none;
+}
+.v-popper--theme-dropdown .v-popper__inner {
+	border: none;
+	/* background: transparent; if anyone is changing this please talk to me first*/
+	border-radius: var(--card-border-radius);
+	/* color: var(--input-color); */
+}
 
 .bgl_input .canvas {
 	width: 100%;
@@ -1601,58 +1601,58 @@ p {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-e5ae4283] {
+.bagel-input textarea[data-v-63ff8c9c] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-e5ae4283] {
+.bagel-input.text-input textarea[data-v-63ff8c9c] {
 	resize: none;
 }
-.code textarea[data-v-e5ae4283] {
+.code textarea[data-v-63ff8c9c] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-e5ae4283]::placeholder {
+.code textarea[data-v-63ff8c9c]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-e5ae4283] {
+.bagel-input.small[data-v-63ff8c9c] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-e5ae4283] {
+.bagel-input.dense label[data-v-63ff8c9c] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-e5ae4283]:disabled {
+.bagel-input input[data-v-63ff8c9c]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-e5ae4283] {
+.bagel-input label[data-v-63ff8c9c] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-e5ae4283] {
+.textInputIconWrap .bgl_icon-font[data-v-63ff8c9c] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input[data-v-e5ae4283]{
+.textInputIconWrap input[data-v-63ff8c9c]{
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
-.txtInputIconStart .iconStart[data-v-e5ae4283] {
+.txtInputIconStart .iconStart[data-v-63ff8c9c] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.txtInputIconStart input[data-v-e5ae4283], .txtInputIconStart textarea[data-v-e5ae4283]{
+.txtInputIconStart input[data-v-63ff8c9c], .txtInputIconStart textarea[data-v-63ff8c9c]{
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
-.bagel-input.small textarea[data-v-e5ae4283] {
+.bagel-input.small textarea[data-v-63ff8c9c] {
 	height: 30px;
 }
 
@@ -1733,7 +1733,7 @@ p {
   gap: 0;
 }
 
-.bgl_bottombar[data-v-557bcad0] {
+.bgl_bottombar[data-v-ee7b8f1a] {
   background-color: var(--bgl-primary);
   color: var(--bgl-light-text);
   grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
@@ -1742,16 +1742,16 @@ p {
 	padding: 0;
 	--bgl_bottombar-btn-width: 62px;
 }
-.bgl_bottombar[data-v-557bcad0]>* {
+.bgl_bottombar[data-v-ee7b8f1a]>* {
   width: var(--bgl_bottombar-btn-width);
 }
-.bgl_bottombar[data-v-557bcad0]::-webkit-scrollbar {
+.bgl_bottombar[data-v-ee7b8f1a]::-webkit-scrollbar {
   display: none;
 }
-.bgl_bottombar .nav-button[data-v-557bcad0] {
+.bgl_bottombar .nav-button[data-v-ee7b8f1a] {
   border-radius: var(--card-border-radius);
 }
-.bgl_bottombar .router-link-active[data-v-557bcad0] {
+.bgl_bottombar .router-link-active[data-v-ee7b8f1a] {
   background: var(--bgl-popup-bg);
   color: var(--bgl-primary) !important;
 }
@@ -2667,10 +2667,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   height: 100%;
   border-radius: var(--input-border-radius);
   position: relative;
-  background: var(--bgl-bg)
+  background: var(--bgl-bg);
+  direction: ltr;
 }
 .leaflet-map::after {
   content: "";
+  pointer-events: none;
   position: absolute;
   inset: 0;
   box-shadow: inset 0 0 10px #00000012;
@@ -2683,7 +2685,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   display: none;
 }
 .leaflet-pane.leaflet-marker-pane img {
-  filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
+  /* filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2)); */
 }
 .leaflet-touch .leaflet-control-zoom-in,
 .leaflet-touch .leaflet-control-zoom-out {
@@ -2719,6 +2721,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-bar a:focus {
   filter: var(--bgl-active-filter);
 }
+.leaflet-marker-icon {
+	cursor: pointer;
+}
 .bg-dark {
     position: fixed;
     top: 0;

package/package.json

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

package/src/components/MapEmbed.vue

@@ -5,9 +5,13 @@ import { onMounted, watch } from 'vue'
 import './leaflet/leaflet.css'
 
 type MapMarker = {
-	lat: number
-	lon: number
-} | [number, number]
+	lat: number | string
+	lng: number | string
+	tooltip?: string
+	popup?: string
+	title?: string
+	[key: string]: any
+} | [(number | string), (number | string), string?]
 
 const props = withDefaults(
 	defineProps<{
@@ -20,19 +24,20 @@ const props = withDefaults(
 	}>(),
 	{
 		center: () => [31.7683, 35.2137],
-		zoom: 13,
+		zoom: 15,
 		height: 400,
 		zoomControl: true,
 		markerIcon: '',
 	}
 )
 
+const emit = defineEmits(['select'])
 let L = $ref<any>()
 let map = $ref<Map>()
 const _markers = $ref<Marker[]>([])
 const id = $ref(Math.random().toString(36).slice(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 defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>'
 const leafletScriptUrl = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
 
 async function loadGlobalL() {
@@ -49,37 +54,57 @@ async function initializeMap() {
 			zoom: props.zoom,
 			zoomControl: props.zoomControl,
 		})
-		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map)
+
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, }).addTo(map)
 	}
 }
 
-function addMarker(L: any, latlng: LatLngExpression) {
+async function addMarker(marker: MapMarker) {
 	const iconSVG = props.markerIcon || defaultMarkerSVG
-	const customIcon = L?.icon({
+	const icon = L?.icon({
 		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(iconSVG)}`,
 		iconSize: [32, 32],
 	})
+	const latlng = latLangFromMarker(marker)
+	const title = Array.isArray(marker) ? marker[2] : marker.title ?? marker.tooltip
+	const tooltip = Array.isArray(marker) ? marker[2] : marker.tooltip
+	const m = L?.marker(latlng, { title, icon, interactive: true }).addTo(map as Map) as Marker
+	if (tooltip) m.bindTooltip(tooltip, { direction: 'top' }) // Use `bindPopup` if you want a click-to-show label
+	m.on('click', () => { emit('select', marker) })
 
-	const marker = L?.marker(latlng, { icon: customIcon }).addTo(map as Map)
-	_markers.push(marker)
+	_markers.push(m)
 }
 
 function fitMarkers(L: any) {
 	if (_markers.length > 0) {
-		map?.fitBounds(L.featureGroup(_markers as unknown as Layer[]).getBounds())
+		const latLngs = _markers.map(marker => marker.getLatLng())
+		const bounds = L.latLngBounds(latLngs)
+		const center = bounds.getCenter()
+		map?.setView(center, props.zoom)
+		map?.fitBounds(bounds, {
+			animate: true,
+			padding: [20, 20], // Adjust padding as needed
+		})
 	}
 }
 
+function latLangFromMarker(marker: MapMarker): LatLngExpression {
+	const [lat, lng] = (Array.isArray(marker)
+		? [marker[0], marker[1]]
+		: [marker.lat, marker.lng])
+	return { lat: +lat, lng: +lng }
+}
+
 async function watchMarkers(markers?: MapMarker[]) {
 	if (!L) L = await loadGlobalL()
 	_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)
+		if (!map) await initializeMap()
+		addMarker(marker)
 	}
+	fitMarkers(L)
 }
 
 watch(() => props.markers, watchMarkers, { immediate: true })
@@ -89,7 +114,7 @@ onMounted(initializeMap)
 </script>
 
 <template>
-	<div :id="id" class="leaflet-map" :style="{ height: `${props.height || 400}px` }" />
+	<div :id="id" class="leaflet-map" :style="{ height: `${props.height || 400}px` }" dir="ltr" />
 </template>
 
 <style>
@@ -97,11 +122,13 @@ onMounted(initializeMap)
   height: 100%;
   border-radius: var(--input-border-radius);
   position: relative;
-  background: var(--bgl-bg)
+  background: var(--bgl-bg);
+  direction: ltr;
 }
 
 .leaflet-map::after {
   content: "";
+  pointer-events: none;
   position: absolute;
   inset: 0;
   box-shadow: inset 0 0 10px #00000012;
@@ -117,7 +144,7 @@ onMounted(initializeMap)
 }
 
 .leaflet-pane.leaflet-marker-pane img {
-  filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
+  /* filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2)); */
 }
 
 .leaflet-touch .leaflet-control-zoom-in,
@@ -160,4 +187,8 @@ onMounted(initializeMap)
 .leaflet-bar a:focus {
   filter: var(--bgl-active-filter);
 }
+
+.leaflet-marker-icon {
+	cursor: pointer;
+}
 </style>

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
 import { Btn, type MaterialIcons } from '@bagelink/vue'
-import SelectInput from '../SelectInput.vue'
 
 defineProps<{ config: ToolbarConfig }>()
 const emit = defineEmits(['action'])

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

@@ -27,7 +27,7 @@ const props = withDefaults(
 		multiline?: boolean
 		autoheight?: boolean
 		code?: boolean
-		lines?: number
+		lines?: number | string
 		autocomplete?: AutoFillField
 		autofocus?: boolean
 		debounceDelay?: number

package/src/components/layout/BottomMenu.vue

@@ -26,6 +26,7 @@ defineProps<{
 				{{ nav.label }}
 			</p>
 		</Btn>
+		<slot name="end" />
 	</Card>
 </template>