@bagelink/vue 0.0.724 → 0.0.728

package/dist/style.css

@@ -1,78 +1,47 @@
 @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");
-.lightbox-overlay[data-v-c003c59a] {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+.bgl-lightbox-overlay[data-v-b3a3d091] {
 	background: rgba(0, 0, 0, 0.8);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
 }
-.lightbox[data-v-c003c59a] {
-	position: relative;
+.bgl-lightbox[data-v-b3a3d091] {
 	max-height: 90%;
-	width: 90vw;
-	text-align: center;
 }
-.close-button[data-v-c003c59a] {
-	position: fixed;
-	top: 1rem;
-	inset-inline-end: 1rem;
+.bgl-lightbox-item[data-v-b3a3d091]{
+	animation: 500ms ease bgl-lightbox-load-b3a3d091;
+}
+@keyframes bgl-lightbox-load-b3a3d091 {
+from {
+    scale:0.7;
 }
-.lightbox-item[data-v-c003c59a] * {
+to {
+	scale:1;
+}
+}
+.bgl-lightbox-item[data-v-b3a3d091] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
+	margin: auto;
+	animation: 200ms ease bgl-lightbox-load-b3a3d091;
 }
-.navigation[data-v-c003c59a] {
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-	position: absolute;
+.navigation[data-v-b3a3d091] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-c003c59a] {
-	user-select: none;
+.navigation-btn[data-v-b3a3d091] {
 	width: var(--input-height);
 	height: var(--input-height);
-	border-radius: 100%;
 }
-.thumbnails[data-v-c003c59a] {
-	display: flex;
-	justify-content: center;
-	margin-top: 10px;
-	overflow: auto;
-	padding: 1rem;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-.thumbnail[data-v-c003c59a] {
+.thumbnail[data-v-b3a3d091] {
 	height: 50px;
 	width: 50px;
-	object-fit: cover;
-	margin: 0 5px;
-	cursor: pointer;
-	opacity: 0.5;
-	border-radius: 3px;
-	transition: all 200ms ease;
-	background-color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 }
-.thumbnail[data-v-c003c59a]:hover {
+.thumbnail[data-v-b3a3d091]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-c003c59a]:active {
+.thumbnail[data-v-b3a3d091]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-c003c59a] {
+.thumbnail.active[data-v-b3a3d091] {
 	opacity: 1;
 	outline: 2px solid white;
 }
@@ -500,6 +469,24 @@ a[data-v-895cf824] {
     height: fit-content;
 }
 
+.is-active .modal {
+    animation: 200ms ease bgl-modal-animation;
+
+}
+
+@keyframes bgl-modal-animation {
+    from {
+        scale: 0.7;
+        transform: translateY(2rem);
+    }
+
+    to {
+        scale: 1;
+        transform: translateY(0);
+
+    }
+}
+
 .small-modal .modal {
     max-width: 300px;
     text-align: center;
@@ -1144,14 +1131,15 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-862e1f20],
-.bgl_vid video[data-v-862e1f20] {
+.bgl_vid iframe[data-v-8495afe2],
+.bgl_vid video[data-v-8495afe2] {
 	width: 100%;
 	height: auto;
 	display: block;
+	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-862e1f20] {
+.bgl_vid.vid_empty[data-v-8495afe2] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
@@ -1813,7 +1801,7 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.fileUploadWrap[data-v-5911e10d] {
+.fileUploadWrap[data-v-d4a17ec6] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1825,7 +1813,7 @@ display: block;
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-5911e10d] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-d4a17ec6] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1833,14 +1821,14 @@ display: block;
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-5911e10d],
-.fileUploadWrap[data-v-5911e10d]:hover {
+.fileUploadWrap.dragover[data-v-d4a17ec6],
+.fileUploadWrap[data-v-d4a17ec6]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto;"][data-v-d4a17ec6] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-5911e10d] {
+.multi-image-item-preview[data-v-d4a17ec6] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1854,12 +1842,12 @@ display: block;
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-5911e10d] {
+.multi-image-item-preview p[data-v-d4a17ec6] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-5911e10d]{
+.multi-preview[data-v-d4a17ec6]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1870,17 +1858,17 @@ display: block;
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-5911e10d]{
+.bgl-single-preview[data-v-d4a17ec6]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-5911e10d]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-d4a17ec6]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-5911e10d] {
+.single-image-item-preview[data-v-d4a17ec6] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1888,13 +1876,13 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-d4a17ec6] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-5911e10d] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-d4a17ec6] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-5911e10d]{
+.single-preview[data-v-d4a17ec6]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1904,17 +1892,17 @@ display: block;
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-5911e10d] {
+.bgl_fill-image.single-image-item-preview[data-v-d4a17ec6] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-5911e10d]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-d4a17ec6]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-5911e10d] {
+.single-image-item-preview .pie[data-v-d4a17ec6] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1928,31 +1916,31 @@ display: block;
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-5911e10d] {
+.bgl_oval-upload[data-v-d4a17ec6] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-5911e10d] {
+.bgl_oval-upload p[data-v-d4a17ec6] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-5911e10d]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-d4a17ec6]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-5911e10d] {
+.bgl_oval-upload .pie[data-v-d4a17ec6] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-5911e10d] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-d4a17ec6] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-5911e10d]{
+.bgl_oval-upload .single-image-item-preview[data-v-d4a17ec6]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-5911e10d] {
+.bgl_oval-upload .single-preview[data-v-d4a17ec6] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-5911e10d] {
+.pie[data-v-d4a17ec6] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1960,7 +1948,7 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-5911e10d]:before {
+.pie[data-v-d4a17ec6]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1978,26 +1966,26 @@ display: block;
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-5911e10d] {
+.pie .success[data-v-d4a17ec6] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-5911e10d] {
+.pie .progress[data-v-d4a17ec6] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-5911e10d] {
+.pie.complete .progress[data-v-d4a17ec6] {
 	display: none;
 }
-.pie.complete .success[data-v-5911e10d] {
+.pie.complete .success[data-v-d4a17ec6] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-5911e10d]:before {
+.pie.complete[data-v-d4a17ec6]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-5911e10d] {
+.pie.complete[data-v-d4a17ec6] {
 	color: var(--bgl-green);
 }
 
@@ -2301,23 +2289,48 @@ p {
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-ee96aa53]{
+.preview-area[data-v-c9729efd]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 }
-.rich-text-editor[data-v-ee96aa53] {
+.rich-text-editor[data-v-c9729efd] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-ee96aa53]{
+.editableContent[data-v-c9729efd]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-ee96aa53], .preview-area[data-v-ee96aa53]{
+.content-area[data-v-c9729efd], .preview-area[data-v-c9729efd]{
 	min-height: 200px;
 }
+.fullscreen-mode[data-v-c9729efd] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background: var(--input-bg);
+    padding: 2rem;
+    overflow: auto;
+	border-radius: 0;
+}
+.fullscreen-mode .content-area[data-v-c9729efd]{
+	height: calc(100vh - 5rem);
+	padding: 4rem !important;
+	max-width: 900px;
+	margin-inline: auto ;
+	overflow-y: auto;
+}
+.fullscreen-mode .toolbar[data-v-c9729efd]{
+	max-width: 900px;
+	margin-inline: auto ;
+	/* border-bottom: 1px solid var(--border-color); */
+	/* margin-bottom: 2rem; */
+}
 
 /* [contenteditable='true'] {
 	  white-space: pre-wrap;

package/package.json

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

package/src/components/BglVideo.vue

@@ -26,7 +26,10 @@ const videoUrl = $computed(() => {
 	if (embedType) {
 		if (embedType === 'YouTube') {
 			const videoId = props.src?.split(/v=|youtu\.be\//)[1]?.split('&')?.[0]
-			return `https://www.youtube.com/embed/${videoId}`
+			const queryParams = new URLSearchParams({
+				autoplay: props.autoplay ? '1' : '0'
+			})
+			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
 		}
 		if (embedType === 'Vimeo') {
 			const vimeoRegex
@@ -38,8 +41,6 @@ const videoUrl = $computed(() => {
 	}
 	return props.src
 })
-
-console.log('Video URL:', videoUrl)
 </script>
 
 <template>
@@ -51,6 +52,7 @@ console.log('Video URL:', videoUrl)
 			frameborder="0"
 			allowfullscreen
 			title="Video"
+			allow="autoplay"
 		/>
 		<video
 			v-else-if="src"
@@ -71,6 +73,7 @@ console.log('Video URL:', videoUrl)
 	width: 100%;
 	height: auto;
 	display: block;
+	margin: auto;
 	border-radius: var(--input-border-radius);
 }
 

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

@@ -196,7 +196,7 @@ function drop(e: DragEvent) {
 						:key="file.id"
 						class="multi-image-item-preview"
 					>
-						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
+						<img v-if="isImage(file.extension || file.url)" v-lightbox class="multi-preview" :src="file.url" alt="">
 						<Icon v-else icon="draft" class="multi-preview" />
 						<p class="m-0">
 							{{ file.name }}
@@ -250,7 +250,7 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<img v-if="isImage(file.extension || file.url)" class="single-preview" :src="file.url" alt="">
+						<img v-if="isImage(file.extension || file.url)" v-lightbox class="single-preview" :src="file.url" alt="">
 						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>
 

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

@@ -6,45 +6,46 @@ import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
 defineProps<{ config: ToolbarConfig }>()
 const emit = defineEmits(['action'])
 
-const colorPicker = $ref<HTMLInputElement | null>(null)
-const fontSizeInput = $ref<HTMLInputElement | null>(null)
+// const colorPicker = $ref<HTMLInputElement | null>(null)
+// const fontSizeInput = $ref<HTMLInputElement | null>(null)
 
 interface toolbarOption {
 	name: ToolbarConfigOption | 'separator'
-	icon: MaterialIcons
+	label?: string
+	icon?: MaterialIcons
+	class?: string
 }
-
 const toolbarOptions: toolbarOption[] = [
 	{ name: 'separator' },
-	{ name: 'bold', icon: 'format_bold' },
-	{ name: 'italic', icon: 'format_italic' },
-	{ name: 'underline', icon: 'format_underlined' },
+	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
+	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
+	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },
 	{ name: 'separator' },
-	{ name: 'orderedList', icon: 'format_list_numbered' },
-	{ name: 'unorderedList', icon: 'format_list_bulleted' },
+	{ name: 'orderedList', label: 'Ordered List', icon: 'format_list_numbered' },
+	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
 	{ name: 'separator' },
-	{ name: 'link', icon: 'add_link' },
-	{ name: 'image', icon: 'add_photo_alternate' },
-	{ name: 'youtube', icon: 'youtube_activity' },
+	{ name: 'link', label: 'Link', icon: 'add_link' },
+	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
+	{ name: 'youtube', label: 'YouTube', icon: 'youtube_activity' },
 	{ name: 'separator' },
-	{ name: 'splitView', icon: 'code' },
-	{ name: 'clear', icon: 'format_clear' },
-
+	{ name: 'splitView', label: 'Split View', icon: 'code' },
+	{ name: 'clear', label: 'Clear Formatting', icon: 'format_clear' },
+	{ name: 'fullScreen', label: 'Full Screen', icon: 'fullscreen', class: 'ms-auto' },
 ]
 
-function handleColorPick(type: 'textColor' | 'backgroundColor') {
-	const color = colorPicker?.value
-	if (color) {
-		emit('action', type, color)
-	}
-}
+// function handleColorPick(type: 'textColor' | 'backgroundColor') {
+// 	const color = colorPicker?.value
+// 	if (color) {
+// 		emit('action', type, color)
+// 	}
+// }
 
-function handleFontSizeChange() {
-	const size = fontSizeInput?.value
-	if (size) {
-		emit('action', 'fontSize', size)
-	}
-}
+// function handleFontSizeChange() {
+// 	const size = fontSizeInput?.value
+// 	if (size) {
+// 		emit('action', 'fontSize', size)
+// 	}
+// }
 function handleSelectChange(selectedOption: string) {
 	emit('action', 'formatBlock', selectedOption)
 }
@@ -62,9 +63,10 @@ function handleSelectChange(selectedOption: string) {
 			<Btn
 				v-if="action.name !== 'separator' && config.includes(action.name)"
 				:key="action.name"
-				v-tooltip="action.name"
+				v-tooltip="action.label"
 				thin
 				flat
+				:class="action.class"
 				class="rounded"
 				:aria-label="action.name"
 				:icon="action.icon"

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

@@ -33,6 +33,7 @@ const defaultConfig: ToolbarConfig = [
 	'youtube',
 	'codeView',
 	'clear',
+	'fullScreen'
 ]
 const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
 let contentHtml = $ref(props.modelValue)
@@ -69,6 +70,9 @@ function handleToolbarAction(action: string, value?: string) {
 		case 'codeView':
 			isCodeView = !isCodeView
 			break
+		case 'fullScreen':
+			toggleFullScreen()
+			break
 		default:
 			applyFormatting(action, value)
 			break
@@ -76,6 +80,13 @@ function handleToolbarAction(action: string, value?: string) {
 	updateContent()
 }
 
+function toggleFullScreen() {
+	const editor = document.querySelector('.rich-text-editor')
+	if (editor) {
+		editor.classList.toggle('fullscreen-mode')
+	}
+}
+
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== contentHtml) {
 		contentHtml = newValue
@@ -125,8 +136,8 @@ function handleKeyDown(event: KeyboardEvent) {
 <template>
 	<div class="rich-text-editor round pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
-		<div class="editor-container flex flex-stretch" :class="{ 'split-view': isSplitView }">
-			<div class="content-area rounded p-1 bg-white shadow-light w-100 grid" :class="{ 'code-view': isCodeView }">
+		<div class="editor-container flex flex-stretch gap-1 m_column">
+			<div class="content-area rounded p-1 bg-white shadow-light w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -186,6 +197,31 @@ function handleKeyDown(event: KeyboardEvent) {
 .content-area, .preview-area{
 	min-height: 200px;
 }
+.fullscreen-mode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background: var(--input-bg);
+    padding: 2rem;
+    overflow: auto;
+	border-radius: 0;
+}
+.fullscreen-mode .content-area{
+	height: calc(100vh - 5rem);
+	padding: 4rem !important;
+	max-width: 900px;
+	margin-inline: auto ;
+	overflow-y: auto;
+}
+.fullscreen-mode .toolbar{
+	max-width: 900px;
+	margin-inline: auto ;
+	/* border-bottom: 1px solid var(--border-color); */
+	/* margin-bottom: 2rem; */
+}
 
 /* [contenteditable='true'] {
 	  white-space: pre-wrap;

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

@@ -21,5 +21,8 @@ export type ToolbarConfigOption = 'bold'
 	| 'codeBlock'
 	| 'splitView'
 	| 'codeView'
+	| 'youtube'
+	| 'clear'
+	| 'fullScreen'
 
 export type ToolbarConfig = ToolbarConfigOption[]