@bagelink/vue 0.0.716 → 0.0.726

package/dist/utils/BagelFormUtils.d.ts

@@ -50,10 +50,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -63,15 +66,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -88,10 +88,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -101,15 +104,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             modelValue: Record<string, any>;
@@ -125,10 +125,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -138,15 +141,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -165,10 +165,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
             required: true;
         };
-        id: {
+        label: {
             type: import('vue').PropType<string>;
         };
-        label: {
+        onSubmit: {
+            type: import('vue').PropType<(data: any) => void>;
+        };
+        id: {
             type: import('vue').PropType<string>;
         };
         modelValue: {
@@ -178,15 +181,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         onDelete: {
             type: import('vue').PropType<(id: string) => void>;
         };
-        onSubmit: {
-            type: import('vue').PropType<(data: any) => void>;
-        };
         status: {
             type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
         };
     }>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onDirty?: ((...args: any[]) => any) | undefined;
     }, {
         submit: () => void;
@@ -227,10 +227,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -240,15 +243,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -265,10 +265,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -278,15 +281,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             modelValue: Record<string, any>;
@@ -302,10 +302,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
                 type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
                 required: true;
             };
-            id: {
+            label: {
                 type: import('vue').PropType<string>;
             };
-            label: {
+            onSubmit: {
+                type: import('vue').PropType<(data: any) => void>;
+            };
+            id: {
                 type: import('vue').PropType<string>;
             };
             modelValue: {
@@ -315,15 +318,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             onDelete: {
                 type: import('vue').PropType<(id: string) => void>;
             };
-            onSubmit: {
-                type: import('vue').PropType<(data: any) => void>;
-            };
             status: {
                 type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
             };
         }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onSubmit?: ((...args: any[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
             onDirty?: ((...args: any[]) => any) | undefined;
         }, {
             submit: () => void;
@@ -342,10 +342,13 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             type: import('vue').PropType<import('..').BglFormSchemaFnT<any>>;
             required: true;
         };
-        id: {
+        label: {
             type: import('vue').PropType<string>;
         };
-        label: {
+        onSubmit: {
+            type: import('vue').PropType<(data: any) => void>;
+        };
+        id: {
             type: import('vue').PropType<string>;
         };
         modelValue: {
@@ -355,15 +358,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         onDelete: {
             type: import('vue').PropType<(id: string) => void>;
         };
-        onSubmit: {
-            type: import('vue').PropType<(data: any) => void>;
-        };
         status: {
             type: import('vue').PropType<import('../components/form/BglForm.vue').FormStatus>;
         };
     }>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onDirty?: ((...args: any[]) => any) | undefined;
     }, {
         submit: () => void;

package/dist/utils/objects.d.ts

@@ -1,5 +1,4 @@
 import { BagelField } from '..';
-
 export declare function getPropByPath(obj: Record<string, any>, propPath?: string, bagelField?: BagelField): {};
 export declare function setPropByPath(obj: Record<string, any>, path?: string, value?: any): void;
 //# sourceMappingURL=objects.d.ts.map

package/package.json

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

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/index.vue

@@ -146,33 +146,53 @@ function handleKeyDown(event: KeyboardEvent) {
 </template>
 
 <style scoped>
+@font-face {
+    font-family: 'FontWithASyntaxHighlighter';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
+}
+
+@font-palette-values --myCustomPalette {
+  font-family: 'FontWithASyntaxHighlighter';
+  override-colors:
+    0 #6191c2, /* keywords, {} */
+    1 #75975d, /* comments */
+    2 yellow, /* literals */
+    3 #a3c19a, /* numbers */
+    4 blue, /* functions, [] */
+    5 orange, /* js others */
+    6 black, /* not in use */
+    7 #bc8abd, /* inside quotes, css properties, few chars */
+    8 #818181 /* few chars */
+  ;
+}
+.preview-area{
+	font-family: "FontWithASyntaxHighlighter", monospace;
+  	font-palette: --myCustomPalette;
+}
 .rich-text-editor {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
-	/* font-family: Arial, sans-serif; */
-	/* max-width: 800px; */
-	/* margin: 0 auto; */
 }
 .editableContent{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
+.content-area, .preview-area{
+	min-height: 200px;
+}
+
 /* [contenteditable='true'] {
 	  white-space: pre-wrap;
 	  word-wrap: break-word;
 	outline: none;
 	height: 100%;
 } */
-.content-area{
-}
-.content-area, .preview-area{
-	min-height: 200px;
-
-}
-.preview-area{}
-
 /*
 
 .editor-container {

package/src/components/lightbox/Lightbox.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { Btn, Icon } from '@bagelink/vue'
+import { watch } from 'vue'
+import type { LightboxItem } from './lightbox.types'
+
+let isOpen = $ref(false)
+let currentItem = $ref<LightboxItem>()
+let group = $ref<LightboxItem[]>([])
+let currentIndex = $ref(0)
+
+function open(item: LightboxItem, groupItems: LightboxItem[] = []) {
+	isOpen = true
+	currentItem = item
+	if (!groupItems.length) return
+	group = groupItems
+	currentIndex = groupItems.indexOf(item)
+	document.addEventListener('keydown', handleKeydown)
+}
+
+function close() {
+	isOpen = false
+	document.removeEventListener('keydown', handleKeydown)
+}
+
+function next() {
+	if (group.length > 1) {
+		currentIndex = (currentIndex + 1) % group.length
+		currentItem = group[currentIndex]
+	}
+}
+
+function prev() {
+	if (group.length > 1) {
+		currentIndex = (currentIndex - 1 + group.length) % group.length
+		currentItem = group[currentIndex]
+	}
+}
+
+function selectItem(index: number) {
+	currentIndex = index
+	currentItem = group[index]
+}
+
+watch(() => isOpen, (val) => {
+	if (val) document.body.style.overflow = 'hidden'
+	else document.body.style.overflow = ''
+})
+
+function normalizeURL(url: string) {
+	if (url.startsWith('https://')) return url
+	url = url.replace(/http:\/\//, '')
+	return `//${url}`
+}
+
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		close()
+	} else if (event.key === 'ArrowLeft') {
+		prev()
+	} else if (event.key === 'ArrowRight') {
+		next()
+	}
+}
+
+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"
+				>
+					<img
+						v-if="item.type === 'image'"
+						class="thumbnail"
+						:src="item.src"
+						alt=""
+						@click="selectItem(index)"
+					>
+					<Icon
+						v-else
+						class="thumbnail"
+						icon="description"
+						@click="selectItem(index)"
+					/>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.lightbox-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.8);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+}
+
+.lightbox {
+	position: relative;
+	max-height: 90%;
+	width: 90vw;
+	text-align: center;
+}
+
+.close-button {
+	position: fixed;
+	top: 1rem;
+	inset-inline-end: 1rem;
+}
+
+.lightbox-item * {
+	max-width: 90%;
+	max-height: calc(80vh - 90px);
+	border-radius: 3px;
+}
+
+.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;
+}
+.thumbnail:active {
+	opacity: 0.8;
+}
+
+.thumbnail.active {
+	opacity: 1;
+	outline: 2px solid white;
+}
+</style>

package/src/components/lightbox/index.ts

@@ -0,0 +1,63 @@
+import type { App, DirectiveBinding } from 'vue'
+import { createApp } from 'vue'
+import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
+import Lightbox from './Lightbox.vue'
+import type { LightboxItem } from './lightbox.types'
+
+type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
+const groups: Record<string, LightboxItem[]> = {}
+const lightboxDirective = {
+	mounted(el: HTMLElement, binding: DirectiveBinding) {
+		const lightboxInstance = createLightboxInstance()
+		if (!lightboxInstance || !lightboxInstance.open) return
+		if (binding.value.group) {
+			if (!groups[binding.value.group]) groups[binding.value.group] = []
+			const src = binding.value.src || binding.value || el.getAttribute('src') || ''
+			groups[binding.value.group].push({
+				src,
+				type: binding.value.type || determineFileType(src),
+				name: binding.value.name || ''
+			})
+		}
+		el.addEventListener('click', (e) => {
+			e.stopPropagation()
+			const group = binding.value.group || null
+			const item: LightboxItem = {
+				src: binding.value.src || binding.value,
+				type: binding.value.type || determineFileType(binding.value.src || binding.value),
+				name: binding.value.name || '',
+				thumbnail: binding.value.thumbnail || '',
+			}
+			const lightboxInstance = createLightboxInstance()
+			if (!lightboxInstance || !lightboxInstance.open) return
+			if (binding.value.group) {
+				if (!groups[binding.value.group]) groups[binding.value.group] = []
+				groups[binding.value.group].push(item)
+			}
+			const open = lightboxInstance.open as OpenFunction
+			open(item, groups[group])
+		})
+	},
+}
+
+function determineFileType(url: string): string {
+	const extension = url.split('.').pop()?.toLowerCase() || ''
+	if (IMAGE_FORMATS_REGEXP.test(extension)) return 'image'
+	if (VIDEO_FORMATS_REGEXP.test(extension)) return 'video'
+	if (['pdf'].includes(extension)) return 'pdf'
+	return 'unknown'
+}
+
+function createLightboxInstance(): InstanceType<typeof Lightbox> | null {
+	const lightboxEl = document.createElement('div')
+	document.body.prepend(lightboxEl)
+
+	const app = createApp(Lightbox)
+	return app.mount(lightboxEl) as InstanceType<typeof Lightbox>
+}
+
+export default {
+	install(app: App) {
+		app.directive('lightbox', lightboxDirective)
+	},
+}

package/src/components/lightbox/lightbox.types.ts

@@ -0,0 +1,6 @@
+export interface LightboxItem {
+	src: string
+	type: string
+	name: string
+	thumbnail?: string
+}

package/src/plugins/bagel.ts

@@ -1,8 +1,8 @@
-// import { vTooltip } from 'floating-vue';
 import FloatingVue from 'floating-vue'
 import { inject } from 'vue'
 import type { InjectionKey, Plugin } from 'vue'
 import { Bagel } from '@bagelink/sdk'
+import Lightbox from '../components/lightbox'
 import clickOutside from '../utils/clickOutside'
 import { useLang } from '../utils'
 
@@ -37,7 +37,7 @@ export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
 		const bagel = new Bagel({ host: options.host, onError: options.onError })
 		app.directive('click-outside', clickOutside)
-
+		app.use(Lightbox)
 		app.use(FloatingVue, {
 			themes: {
 				'bgl-theme': {

package/dist/components/Accordion.d.ts

@@ -1,12 +0,0 @@
-declare function __VLS_template(): {
-    default?(_: {}): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Accordion.vue.d.ts.map