@bagelink/vue 0.0.865 → 0.0.871

package/package.json

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

package/src/components/Carousel.vue

@@ -40,9 +40,11 @@ function disableDrag() {
 
 function updateHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const children = Array.from(bglSlider.children[activeSlideIndex].children)
-	const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
-	yHeight = `${totalHeight}px`
+	setTimeout(() => {
+		const children = Array.from(bglSlider.children[activeSlideIndex].children)
+		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
+		yHeight = `${totalHeight}px`
+	}, 200)
 }
 
 function easeScroll(target: number, duration = 500) {

package/src/components/MapEmbed.vue

@@ -5,9 +5,10 @@ import { onMounted, watch } from 'vue'
 import './leaflet/leaflet.css'
 
 type MapMarker = {
-	lat: number
-	lon: number
-} | [number, number]
+	lat: number | string
+	lon: number | string
+	label?: string
+} | [(number | string), (number | string), string?]
 
 const props = withDefaults(
 	defineProps<{
@@ -20,7 +21,7 @@ const props = withDefaults(
 	}>(),
 	{
 		center: () => [31.7683, 35.2137],
-		zoom: 13,
+		zoom: 15,
 		height: 400,
 		zoomControl: true,
 		markerIcon: '',
@@ -32,7 +33,7 @@ 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() {
@@ -53,20 +54,37 @@ async function initializeMap() {
 	}
 }
 
-function addMarker(L: any, latlng: LatLngExpression) {
+function addMarker(L: any, latlng: LatLngExpression, label?: string) {
 	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)
+
+	if (label) {
+		marker.bindTooltip(label, { direction: 'top' }) // Use `bindPopup` if you want a click-to-show label
+	}
+
+	marker.on('click', () => {
+		console.log('Marker clicked:', latlng)
+		marker.openPopup()
+	})
+
 	_markers.push(marker)
 }
 
 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)
+		console.log(props.zoom, bounds.getCenter())
+		map?.setView(bounds.getCenter(), props.zoom) // A
+		map?.fitBounds(bounds, {
+			animate: true,
+			maxZoom: props.zoom, // B
+			padding: [20, 20], // Adjust padding as needed
+		})
 	}
 }
 
@@ -74,12 +92,16 @@ 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]
+		const [lat, lon, label] = Array.isArray(marker)
+			? [marker[0], marker[1], marker[2] as string]
+			: [marker.lat, marker.lon, marker.label]
+
 		if (!map) initializeMap()
-		addMarker(L, [lat, lon])
-		fitMarkers(L)
+		addMarker(L, [+lat, +lon], label)
 	}
+	fitMarkers(L)
 }
 
 watch(() => props.markers, watchMarkers, { immediate: true })
@@ -89,7 +111,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,7 +119,8 @@ 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 {
@@ -117,7 +140,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 +183,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

@@ -16,6 +16,11 @@ interface toolbarOption {
 	class?: string
 }
 const toolbarOptions: toolbarOption[] = [
+	{ name: 'formatBlock', label: 'h2', icon: 'format_h2' },
+	{ name: 'formatBlock', label: 'h3', icon: 'format_h3' },
+	{ name: 'formatBlock', label: 'h4', icon: 'format_h4' },
+	{ name: 'formatBlock', label: 'h5', icon: 'format_h5' },
+	{ name: 'formatBlock', label: 'h6', icon: 'format_h6' },
 	{ name: 'separator' },
 	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
 	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
@@ -46,34 +51,24 @@ const toolbarOptions: toolbarOption[] = [
 // 		emit('action', 'fontSize', size)
 // 	}
 // }
-function handleSelectChange(selectedOption: string) {
-	emit('action', 'formatBlock', selectedOption)
-}
 </script>
 
 <template>
 	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<SelectInput
-			class="m-0 w150"
-			:options="['Text', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6', 'Blockquote', 'Code']"
-			@change="handleSelectChange"
-		/>
-
-		<template v-for="(action, index) in toolbarOptions">
+		<template v-for="(action, index) in toolbarOptions" :key="index">
 			<Btn
 				v-if="action.name !== 'separator' && config.includes(action.name)"
-				:key="action.name"
 				v-tooltip="action.label"
+				:icon="action.icon"
 				thin
 				flat
+				:aria-label="action.name"
 				:class="action.class"
 				class="radius-05"
-				:aria-label="action.name"
-				:icon="action.icon"
-				@click="emit('action', action.name)"
+				@click="emit('action', action.name, action.label)"
 			/>
 			<span
-				v-if="action.name === 'separator'"
+				v-else-if="action.name === 'separator'"
 				:key="`separator-${index}`"
 				class=" opacity-2 mb-025"
 			>|</span>

package/src/components/form/inputs/RichText2/formatting.ts

@@ -1,4 +1,4 @@
-import { useModal } from '@bagelink/vue'
+let modal: any
 
 export function applyFormatting(command: string, value: string = '') {
 	const selection = window.getSelection()
@@ -7,6 +7,9 @@ export function applyFormatting(command: string, value: string = '') {
 		const span = document.createElement('span')
 
 		switch (command) {
+			case 'formatBlock':
+				formatBlock(value)
+				break
 			case 'bold':
 				span.style.fontWeight = 'bold'
 				break
@@ -73,7 +76,7 @@ export function applyFormatting(command: string, value: string = '') {
 			case 'decreaseFontSize':
 				decreaseFontSize()
 				break
-			case 'insertLink':
+			case 'link':
 				insertLink()
 				break
 			case 'image':
@@ -91,6 +94,16 @@ export function applyFormatting(command: string, value: string = '') {
 	}
 }
 
+function formatBlock(value: string) {
+	if (!value) return
+	const selection = window.getSelection()
+	const range = selection?.getRangeAt(0)
+	if (!range) return
+	range.selectNodeContents(range.startContainer)
+	const el = document.createElement(value)
+	range.surroundContents(el)
+}
+
 function increaseFontSize() {
 	const selection = window.getSelection()
 	if (selection && selection.rangeCount > 0) {
@@ -104,7 +117,15 @@ function increaseFontSize() {
 }
 
 function decreaseFontSize() {
-// TODO:
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const span = document.createElement('span')
+		const currentFontSize = Number.parseInt((range.startContainer.parentNode as HTMLElement).style.fontSize || '16', 10)
+		const newFontSize = currentFontSize - 2
+		span.style.fontSize = `${newFontSize}px`
+		range.surroundContents(span)
+	}
 }
 
 function removeFormatting() {
@@ -142,36 +163,40 @@ function insertList(type: string) {
 }
 
 export function insertLink() {
-	const url = prompt('Enter the URL:')
-	if (url) {
-		const selection = window.getSelection()
-		if (selection && selection.rangeCount > 0) {
-			const range = selection.getRangeAt(0)
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount < 1) return
+	const range = selection.getRangeAt(0)
+	modal.showModalForm({ title: 'Insert Link', schema: [
+		{ id: 'url', $el: 'text', label: 'URL' },
+		{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
+	], onSubmit: (data: any) => {
+		const { url, openInNewTab } = data
+		if (url) {
 			const anchor = document.createElement('a')
 			anchor.href = url
 			range.surroundContents(anchor)
+			if (openInNewTab) anchor.target = '_blank'
 		}
-	}
+	} })
 }
 
 export function insertImage() {
-	console.log('image')
-	const { showModalForm } = useModal()
-	console.log(showModalForm)
-	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (_data) => {
-		//
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount < 1) return
+	const range = selection.getRangeAt(0)
+	modal.showModalForm({ title: 'Upload Image', schema: [
+		{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
+		{ id: 'alt', $el: 'text', label: 'Alt Text' },
+	], onSubmit: (_data: any) => {
+		const { src } = _data
+		if (src) {
+			const img = document.createElement('img')
+			img.src = src
+			img.alt = _data.alt
+			range.deleteContents()
+			range.insertNode(img)
+		}
 	} })
-	// const url = prompt('Enter the image URL:')
-	// if (url) {
-	// 	const selection = window.getSelection()
-	// 	if (selection && selection.rangeCount > 0) {
-	// 		const range = selection.getRangeAt(0)
-	// 		const img = document.createElement('img')
-	// 		img.src = url
-	// 		range.deleteContents()
-	// 		range.insertNode(img)
-	// 	}
-	// }
 }
 
 export function createTable() {
@@ -200,3 +225,22 @@ export function createTable() {
 		}
 	}
 }
+
+function clearFormatting() {
+	const selection = window.getSelection()
+	const range = selection?.getRangeAt(0)
+	if (!range) return
+	range.selectNodeContents(range.startContainer)
+	const contents = range.extractContents()
+	const text = contents.textContent
+	if (text !== null && text !== '') {
+		range.deleteContents()
+		const textNode = document.createTextNode(`${text}`)
+		setTimeout(() => { range.insertNode(textNode) }, 1)
+	}
+}
+
+export function useFormatting(modalInstance?: any) {
+	modal = modalInstance
+	return { applyFormatting, clearFormatting }
+}

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

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
 import type { ToolbarConfig } from './richtext-types'
+import { useModal } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
-import { applyFormatting } from './formatting'
+import { useFormatting } from './formatting'
 import Toolbar from './Toolbar.vue'
 
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
 
+const modal = useModal()
+const { applyFormatting, clearFormatting } = useFormatting(modal)
+
 const editableContent = $ref<HTMLElement | undefined>()
 const defaultConfig: ToolbarConfig = [
+	'formatBlock',
 	'bold',
 	'italic',
 	'underline',
@@ -47,41 +52,37 @@ function updateContent() {
 	emit('update:modelValue', contentHtml)
 }
 
+function updateToolbarHighlight() {
+	if (document.getSelection()) {
+		const selection = document.getSelection()
+		const range = selection?.rangeCount ? selection.getRangeAt(0) : null
+		const container = range?.commonAncestorContainer as HTMLElement
+		if (container) {
+			let currentElement = container.nodeType === 3 ? container.parentElement : container
+			while (currentElement && currentElement !== editableContent) {
+				if (['H1', 'H2', 'H3'].includes(currentElement.tagName)) {
+					// emit('action', { type: currentElement.tagName.toLowerCase() }); // Emit the tag to highlight button
+					break
+				}
+				currentElement = currentElement.parentElement
+			}
+		}
+	}
+}
+
+document.addEventListener('selectionchange', updateToolbarHighlight)
+
 type ToolbarAction = 'link' | 'image' | 'table' | 'youtube' | 'fontSize' | 'fontFamily' | 'textColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'orderedList' | 'unorderedList' | 'indent' | 'outdent' | 'blockquote' | 'codeBlock' | 'splitView' | 'codeView' | 'clear' | 'fullScreen'
 
 function handleToolbarAction(action: string, value?: string) {
 	if (!editableContent) return
 	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
 		value = action.replace('align', '').toLowerCase()
-	switch (action) {
-		case 'link':
-			applyFormatting('insertLink')
-			break
-		case 'orderedList':
-			applyFormatting('insertOrderedList')
-			break
-		case 'unorderedList':
-			applyFormatting('insertUnorderedList')
-			break
-		case 'blockquote':
-			applyFormatting('formatBlock', '<blockquote>')
-			break
-		case 'codeBlock':
-			applyFormatting('formatBlock', '<pre>')
-			break
-		case 'splitView':
-			isSplitView = !isSplitView
-			break
-		case 'codeView':
-			isCodeView = !isCodeView
-			break
-		case 'fullScreen':
-			toggleFullScreen()
-			break
-		default:
-			applyFormatting(action, value)
-			break
-	}
+	if (action === 'splitView') isSplitView = !isSplitView
+	else if (action === 'codeView') isCodeView = !isCodeView
+	else if (action === 'fullScreen') toggleFullScreen()
+	else if (action === 'clear') clearFormatting()
+	else applyFormatting(action, value)
 	updateContent()
 }
 
@@ -143,10 +144,10 @@ function logInput(e: InputEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-1 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
 		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area radius-05 p-1 shadow-light w-100 grid">
+			<div class="content-area radius-05 p-1 w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -160,7 +161,13 @@ function logInput(e: InputEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" contenteditable="true" class="preview-area  w-100 radius-05 p-1" @input="logInput" v-text="contentHtml" />
+			<code
+				v-if="isSplitView"
+				contenteditable="true"
+				class="preview-area w-100 radius-05 p-1"
+				@input="(e) => logInput(e as InputEvent)"
+				v-text="contentHtml"
+			/>
 		</div>
 	</div>
 </template>

package/src/components/form/inputs/RichText2/richtext-types.ts

@@ -24,5 +24,6 @@ export type ToolbarConfigOption = 'bold'
 	| 'youtube'
 	| 'clear'
 	| 'fullScreen'
+	| 'formatBlock'
 
 export type ToolbarConfig = ToolbarConfigOption[]

package/src/components/form/inputs/index.ts

@@ -10,8 +10,8 @@ export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'
 export { default as RangeInput } from './RangeInput.vue'
-export { default as RichText } from './RichText.vue'
-export { default as RichText2 } from './RichText2/index.vue'
+export { default as RichText2 } from './RichText.vue'
+export { default as RichText } from './RichText2/index.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as TableField } from './TableField.vue'

package/src/components/layout/BottomMenu.vue

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