@bagelink/vue 0.0.726 → 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);
@@ -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.726",
+  "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/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[]

package/src/components/lightbox/Lightbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Btn, Icon } from '@bagelink/vue'
+import { BglVideo, Btn, Icon } from '@bagelink/vue'
 import { watch } from 'vue'
 import type { LightboxItem } from './lightbox.types'
 
@@ -66,153 +66,134 @@ defineExpose({ open, close })
 </script>
 
 <template>
-	<div
-		v-if="isOpen"
-		class="lightbox-overlay"
-		@keydown.esc="close"
-		@keydown.left="prev"
-		@keydown.right="next"
-		@click="close"
-	>
-		<div class="lightbox" @click.stop>
-			<Btn flat class="close-button color-white" icon="close" @click="close" />
-			<div class="lightbox-item">
-				<template v-if="currentItem?.type === 'image'">
-					<img :src="currentItem?.src" alt="Preview">
-				</template>
-				<template v-else-if="currentItem?.type === 'video'">
-					<video controls autoplay>
-						<source :src="currentItem?.src" type="video/mp4">
-						<track kind="captions" src="#" srclang="en" label="English">
-					</video>
-				</template>
-				<template v-else-if="currentItem?.type === 'pdf'">
-					<embed
-						:src="normalizeURL(currentItem?.src)"
-						type="application/pdf"
-						width="100%"
-						height="1080"
-						:title="currentItem?.name"
-					>
-				</template>
-				<template v-else>
-					<div class="file-info txt-white">
-						<p>File: {{ currentItem?.name }}</p>
-						<p>Type: {{ currentItem?.type }}</p>
-						<a :href="currentItem?.src" target="_blank">Open file</a>
-					</div>
-				</template>
-			</div>
-			<div class="navigation">
-				<Btn
-					class="navigation-btn"
-					icon="arrow_back"
-					@click="prev"
-				/>
-				<Btn
-					class="navigation-btn"
-					icon="arrow_forward"
-					@click="next"
-				/>
-			</div>
-			<div v-if="group && group.length > 1" class="thumbnails">
-				<template
-					v-for="(item, index) in group"
-					:key="index"
+	<transition name="fade">
+		<div
+			v-if="isOpen"
+			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-999 inset mx-auto"
+			@keydown.esc="close"
+			@keydown.left="prev"
+			@keydown.right="next"
+			@click="close"
+		>
+			<div class="bgl-lightbox relative vw90 txt-center" @click.stop>
+				<Btn flat class="fixed top-1 end-1 color-white" icon="close" @click="close" />
+				<div class="bgl-lightbox-item">
+					<template v-if="currentItem?.type === 'image'">
+						<img :src="currentItem?.src" alt="Preview">
+					</template>
+					<template v-else-if="currentItem?.type === 'video'">
+						<BglVideo
+							:src="currentItem?.src"
+							autoplay
+							controls
+						/>
+					</template>
+					<template v-else-if="currentItem?.type === 'pdf'">
+						<embed
+							:src="normalizeURL(currentItem?.src)"
+							type="application/pdf"
+							width="100%"
+							height="1080"
+							:title="currentItem?.name"
+						>
+					</template>
+					<template v-else>
+						<div class="file-info txt-white">
+							<p>File: {{ currentItem?.name }}</p>
+							<p>Type: {{ currentItem?.type }}</p>
+							<a :href="currentItem?.src" target="_blank">Open file</a>
+						</div>
+					</template>
+				</div>
+				<div v-if="group.length" class="navigation flex space-between w-100 absolute">
+					<Btn
+						class="navigation-btn oval user-select-none"
+						icon="arrow_back"
+						@click="prev"
+					/>
+					<Btn
+						class="navigation-btn oval user-select-none"
+						icon="arrow_forward"
+						@click="next"
+					/>
+				</div>
+				<div
+					v-if="group && group.length > 1"
+					class="flex justify-content-center mt-2 overflow
+					 p-1 fixed bottom start end gap-1 m_justify-content-start"
 				>
-					<img
-						v-if="item.type === 'image'"
-						class="thumbnail"
-						:src="item.src"
-						alt=""
-						@click="selectItem(index)"
+					<template
+						v-for="(item, index) in group"
+						:key="index"
 					>
-					<Icon
-						v-else
-						class="thumbnail"
-						icon="description"
-						@click="selectItem(index)"
-					/>
-				</template>
+						<img
+							v-if="item.type === 'image'"
+							class="thumbnail object-fit-cover hover
+							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							:src="item.src"
+							alt=""
+							:class="{ active: currentIndex === index }"
+							@click="selectItem(index)"
+						>
+						<Icon
+							v-else
+							class="thumbnail object-fit-cover hover
+							 opacity-5 round flex bg-white justify-content-center align-items-center flex-shrink-0"
+							icon="description"
+							:class="{ active: currentIndex === index }"
+							@click="selectItem(index)"
+						/>
+					</template>
+				</div>
 			</div>
 		</div>
-	</div>
+	</transition>
 </template>
 
 <style scoped>
-.lightbox-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+.bgl-lightbox-overlay {
 	background: rgba(0, 0, 0, 0.8);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
 }
 
-.lightbox {
-	position: relative;
+.bgl-lightbox {
 	max-height: 90%;
-	width: 90vw;
-	text-align: center;
 }
 
-.close-button {
-	position: fixed;
-	top: 1rem;
-	inset-inline-end: 1rem;
+.bgl-lightbox-item{
+	animation: 500ms ease bgl-lightbox-load;
 }
+@keyframes bgl-lightbox-load {
+  from {
+    scale:0.7;
+  }
 
-.lightbox-item * {
+  to {
+	scale:1;
+
+  }
+}
+
+.bgl-lightbox-item * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
+	margin: auto;
+	animation: 200ms ease bgl-lightbox-load;
 }
 
 .navigation {
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-	position: absolute;
 	top: 50%;
 	transform: translateY(-50%);
 }
 
 .navigation-btn {
-	user-select: none;
 	width: var(--input-height);
 	height: var(--input-height);
-	border-radius: 100%;
-}
-
-.thumbnails {
-	display: flex;
-	justify-content: center;
-	margin-top: 10px;
-	overflow: auto;
-	padding: 1rem;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
 }
 
 .thumbnail {
 	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:hover {
 	opacity: 1;