@bagelink/vue 0.0.1141 → 0.0.1145

package/dist/types/BagelForm.d.ts

@@ -31,6 +31,9 @@ export interface BaseBagelField<T = {
     'disabled'?: boolean;
     'helptext'?: string;
     'options'?: BagelFieldOptions<T>;
+    'slots'?: {
+        [key: string]: any;
+    };
     'defaultValue'?: any;
     'transform'?: (val?: any, rowData?: T) => any;
     'onUpdate'?: (val: any, rowData?: T) => void;

package/dist/types/BagelForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Carousel.vue

@@ -238,6 +238,7 @@ async function disableDrag() {
 }
 
 function startDrag(e: MouseEvent) {
+	e.stopPropagation()
 	if (e.button !== 0 || !props.freeDrag || !isSliderAvailable) return
 
 	clearAutoplay()

package/src/components/Icon/Icon.vue

@@ -31,7 +31,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 	</span>
 	<i
 		v-else-if="iconRenderType === 'font-awesome'"
-		class="fa" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
+		class="fa far" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
 		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
 	/>
 </template>

package/src/components/Modal.vue

@@ -147,7 +147,6 @@ onUnmounted(() => {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: 0;
 }
 .modal-no-title{
 	width: calc(100% + 2rem);

package/src/components/ModalForm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BglFormSchemaFnT, BtnOptions, BagelForm } from '@bagelink/vue'
-import { Btn, Modal, useBagel, BagelForm2 } from '@bagelink/vue'
+import type { BglFormSchemaFnT, BtnOptions } from '@bagelink/vue'
+import { Btn, Modal, useBagel, BagelForm } from '@bagelink/vue'
 
 const props = defineProps<{
 	side?: boolean
@@ -11,13 +11,14 @@ const props = defineProps<{
 	schema: BglFormSchemaFnT<any>
 
 	onSubmit?: (formData: any) => Promise<void>
-
+	onDuplicate?: (formData: any) => Promise<void>
+	submitText?: string
+	cancelText?: string
+	deleteText?: string
+	duplicateText?: string
 	onDelete?: (id: string) => void
-
 	visible?: boolean
-
 	onError?: (err: any) => void
-
 	modelValue?: { [key: string]: any }
 }>()
 
@@ -76,34 +77,38 @@ defineExpose({ setFormValues })
 		:title
 		@update:visible="($event: boolean) => emit('update:visible', $event)"
 	>
-		<BagelForm2
+		<BagelForm
 			v-if="visible"
 			ref="form"
 			v-model="formData"
 			:schema="computedFormSchema"
 			@submit="runSubmit"
 		/>
-		<!-- <BagelForm
-			v-if="visible"
-			ref="form"
-			v-model="formData"
-			:schema="computedFormSchema"
-			@submit="runSubmit"
-		/> -->
 		<template v-if="onDelete || onSubmit" #footer>
-			<div>
-				<Btn thin flat value="Cancel" @click="closeModal" />
+			<div class="flex gap-0">
+				<Btn thin flat :value="cancelText || 'Cancel'" @click="closeModal" />
 				<Btn
-					v-if="onDelete"
+					v-if="onDelete && formData.id"
 					thin
 					icon="delete"
 					flat
-					value="Delete"
+					:value="deleteText || 'Delete'"
 					color="red"
 					@click="runDelete"
 				/>
 			</div>
-			<Btn value="Submit" @click="runSubmit" />
+			<div class="flex gap-05">
+				<Btn
+					v-if="onDuplicate"
+					outline
+					class="px-1"
+					icon="copy_all"
+					flat
+					:value="duplicateText || 'Duplicate'"
+					@click="onDuplicate"
+				/>
+				<Btn v-if="onSubmit" :value="submitText || 'Submit'" @click="runSubmit" />
+			</div>
 		</template>
 	</Modal>
 </template>

package/src/components/Zoomer.vue

@@ -65,9 +65,12 @@ let panLocked = $ref(true)
 let raf = $ref<number | undefined>()
 let tapDetector = $ref<TapDetector | undefined>()
 
+let translateXValue = $ref(0)
+let translateYValue = $ref(0)
+
 const wrapperStyle = $computed(() => {
-	const translateXValue = containerWidth * animTranslateX
-	const translateYValue = containerHeight * animTranslateY
+	translateXValue = containerWidth * animTranslateX
+	translateYValue = containerHeight * animTranslateY
 	return {
 		transform: [
 			`translate(${translateXValue}px, ${translateYValue}px)`,
@@ -169,12 +172,18 @@ function calcTranslateLimit() {
 		const imageToContainerRatio = containerWidth / aspectRatio / containerHeight
 		let translateLimitY = (scale * imageToContainerRatio - 1) / 2
 		if (translateLimitY < 0) translateLimitY = 0
-		return { x: (scale - 1) / 2, y: translateLimitY }
+		return {
+			x: scale - 1, // Allow full movement to edges horizontally
+			y: translateLimitY * 2 // Allow full movement to edges vertically
+		}
 	}
 	const imageToContainerRatio = containerHeight * aspectRatio / containerWidth
 	let translateLimitX = (scale * imageToContainerRatio - 1) / 2
 	if (translateLimitX < 0) translateLimitX = 0
-	return { x: translateLimitX, y: (scale - 1) / 2 }
+	return {
+		x: translateLimitX * 2, // Allow full movement to edges horizontally
+		y: scale - 1 // Allow full movement to edges vertically
+	}
 }
 
 function getMarginDirection() {
@@ -353,6 +362,15 @@ function onWindowResize() {
 </template>
 
 <style scoped>
+.zoomer-debug {
+	position: fixed;
+	top: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	color: white;
+	z-index: 1000;
+	height: 100px
+}
 .vue-zoomer {
   overflow: hidden;
 }
@@ -360,6 +378,8 @@ function onWindowResize() {
   transform-origin: 50% 50%;
   width: 100%;
   height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
 }
 .zoomer > img {
   vertical-align: top;

package/src/components/form/BagelForm.vue

@@ -144,9 +144,10 @@ function renderSchemaField(field: Field): VNode | null {
 		? {
 			default: () => field.children!
 				.map(child => typeof child === 'string' ? child : renderSchemaField(child))
-				.filter(Boolean)
+				.filter(Boolean),
+			...field.slots
 		}
-		: undefined
+		: field.slots
 
 	return h(Component as any, props, slots)
 }
@@ -170,7 +171,7 @@ defineExpose({ form, isDirty, validateForm })
 <template>
 	<form ref="form" @submit.prevent="handleSubmit">
 		<template v-if="resolvedSchema">
-			<template v-for="(field, index) in resolvedSchema" :key="field.id || index">
+			<template v-for="(field) in resolvedSchema" :key="field.id">
 				<component :is="renderSchemaField(field)" />
 			</template>
 		</template>

package/src/components/form/index.ts

@@ -1,6 +1,5 @@
-export { default as BagelForm2 } from './BagelForm.vue'
+export { default as BglForm } from './BagelForm.vue'
+export { default as BagelForm } from './BagelForm.vue'
 export { default as BglField } from './BglField.vue'
-export { default as BglForm } from './BglForm.vue'
-export { default as BagelForm } from './BglForm.vue'
 export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -295,10 +295,21 @@ function drop(e: DragEvent) {
 					/>
 					<p
 						v-lightbox="{ src: file.url, download: true }"
-						class="ellipsis-1 word-break-all h-20 m-0"
+						class="ellipsis-1 word-break-all h-20 m-0 color-black"
 					>
 						{{ file.name }}
 					</p>
+
+					<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
+						<Icon icon="draft" :size="1.5" />
+						<p
+							v-lightbox="{ src: file.url, download: true }"
+							class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+						>
+							{{ file.name }}
+						</p>
+					</div>
+
 					<Btn
 						thin
 						flat
@@ -462,6 +473,7 @@ function drop(e: DragEvent) {
 						</div>
 						<Image
 							v-if="isImage(fileQ.file.type)"
+							v-lightbox="{ src: fileToUrl(fileQ.file), download: true }"
 							class="single-preview"
 							:src="fileToUrl(fileQ.file)"
 							alt=""

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

@@ -44,23 +44,23 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(Number.parseFloat(`${modelValue}`) || 0)
+let numberValue = $ref(Number.parseFloat(`${modelValue}`) || undefined)
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
-const canAdd = $computed(() => !(max !== undefined && (numberValue + step) > max))
-const canDecrement = $computed(() => !(min !== undefined && (numberValue - step) < min))
+const canAdd = $computed(() => !(max !== undefined && (numberValue || 0 + step) > max))
+const canDecrement = $computed(() => !(min !== undefined && (numberValue || 0 - step) < min))
 
 // Methods
 function increment() {
 	if (!canAdd) return
-	numberValue += step
+	numberValue = (numberValue || 0) + step
 	emit('update:modelValue', numberValue)
 }
 
 function decrement() {
 	if (!canDecrement) return
-	numberValue -= step
+	numberValue = (numberValue || 0) - step
 	emit('update:modelValue', numberValue)
 }
 
@@ -84,7 +84,7 @@ function inputHandler() {
 }
 
 watch(() => numberValue, () => {
-	formattedValue = formatNumber(numberValue)
+	formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
 }, { immediate: true })
 
 watch(() => modelValue, (newVal) => {

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

@@ -7,7 +7,7 @@ import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
 
-const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean }>()
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean, label?: string }>()
 const emit = defineEmits(['update:modelValue'])
 
 const iframe = $ref<HTMLIFrameElement>()
@@ -86,33 +86,36 @@ watch(() => editor.state.content, (newValue) => {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
-		<EditorToolbar
-			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
-			@action="commands.execute"
-		/>
-		<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-			<div class="content-area radius-05">
-				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
-			</div>
-			<CodeEditor
-				v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
-				@update:modelValue="editor.updateContent('html')"
+	<div class="bagel-input">
+		<label>{{ label }}</label>
+		<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+			<EditorToolbar
+				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
+				@action="commands.execute"
 			/>
-		</div>
-		<div v-if="debug" class="flex">
-			<p class="text12 txt-gray mb-0 p-0">
-				Debug
-			</p>
-			<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
-				Clear Session
-			</Btn>
-			<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
-				Download Log
-			</Btn>
-			<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
-				Copy Log
-			</Btn>
+			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
+				<div class="content-area radius-05">
+					<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
+				</div>
+				<CodeEditor
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
+					@update:modelValue="editor.updateContent('html')"
+				/>
+			</div>
+			<div v-if="debug" class="flex">
+				<p class="text12 txt-gray mb-0 p-0">
+					Debug
+				</p>
+				<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
+					Clear Session
+				</Btn>
+				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
+					Download Log
+				</Btn>
+				<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+					Copy Log
+				</Btn>
+			</div>
 		</div>
 	</div>
 </template>

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

@@ -31,14 +31,11 @@ interface PropTypes {
 }
 
 const props = withDefaults(defineProps<PropTypes>(), {
-	searchPlaceholder: 'Search',
 	placeholder: 'Select',
 })
 
 const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
-const searchPlaceholder = $computed(() => props.searchPlaceholder)
-
 const searchInput = $ref<HTMLElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
@@ -61,6 +58,7 @@ const selectedLabel = $computed((): string => {
 	}
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
+const searchPlaceholder = $computed(() => props.searchPlaceholder ?? selectedLabel ?? 'Search')
 
 let serverOptions: Option[] = $ref([])
 let isSearching = $ref(false)

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -184,12 +184,15 @@ watch(() => props.dirPath, () => {
 							:href="pathToUrl(path_key)"
 							:download="path_key.split('/').pop()"
 						/>
-						<p
-							v-lightbox="{ src: pathToUrl(path_key), download: true }"
-							class="ellipsis-1 word-break-all h-20 m-0"
-						>
-							{{ path_key.split('/').pop() }}
-						</p>
+						<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
+							<Icon icon="draft" :size="1.5" />
+							<p
+								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+								class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+							>
+								{{ path_key.split('/').pop() }}
+							</p>
+						</div>
 					</div>
 				</div>
 			</template>
@@ -308,6 +311,8 @@ watch(() => props.dirPath, () => {
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
+								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+
 								class="single-preview"
 								:pathKey="path_key"
 								alt=""
@@ -341,7 +346,9 @@ watch(() => props.dirPath, () => {
 						</div>
 						<Image
 							v-if="isImage(file.file.type)"
+							v-lightbox="{ src: fileToUrl(file.file), download: true }"
 							class="single-preview"
+
 							:src="fileToUrl(file.file)"
 							alt=""
 						/>

package/src/components/lightbox/Lightbox.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Carousel } from '@bagelink/vue'
 import { watch } from 'vue'
 
 let isOpen = $ref(false)
-let currentItem = $ref<LightboxItem>()
 let group = $ref<LightboxItem[]>([])
 let currentIndex = $ref(0)
+let currentItem = $computed<LightboxItem>(() => group[currentIndex])
 
 function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	isOpen = true
-	currentItem = item
-	if (groupItems === undefined) return
-	group = groupItems
-	currentIndex = groupItems.findIndex(({ src }) => item.src === src)
+	group = groupItems || [item]
+	currentIndex = group.findIndex(({ src }) => item.src === src)
 	document.addEventListener('keydown', handleKeydown)
 }
 
@@ -78,16 +76,18 @@ defineExpose({ open, close })
 			@keydown.right="next"
 			@click="clickOutside"
 		>
-			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute m_px-1">
+			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9">
 				<Btn
-					class="navigation-btn oval"
+					class="oval opacity-8"
 					icon="arrow_back"
+					color="black"
 					@click="prev"
 				/>
 
 				<Btn
-					class="navigation-btn oval"
+					class="oval opacity-8"
 					icon="arrow_forward"
+					color="black"
 					@click="next"
 				/>
 			</div>
@@ -113,32 +113,31 @@ defineExpose({ open, close })
 					/>
 					<div v-if="!currentItem?.openFile && !currentItem?.download" />
 				</div>
-				<div class="bgl-lightbox-item">
-					<template v-if="currentItem?.type === 'image'">
-						<Zoomer v-model:zoom="zoom" :disabled="!currentItem?.enableZoom" :mouse-wheel-to-zoom="false">
-							<Image :draggable="false" :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image" />
+
+				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
+					<template v-for="item in group" :key="item.src">
+						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
+							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
 						</Zoomer>
-					</template>
-					<template v-else-if="currentItem?.type === 'video'">
+
 						<BglVideo
-							:src="currentItem?.src"
+							v-else-if="item?.type === 'video'"
+							:src="item?.src"
 							autoplay
 							controls
 							class="vw90"
 						/>
-					</template>
-					<template v-else-if="currentItem?.type === 'pdf'">
+
 						<embed
-							:src="normalizeURL(currentItem?.src)"
+							v-else-if="item?.type === 'pdf'"
+							:src="normalizeURL(item?.src)"
 							type="application/pdf"
 							width="100%"
 							height="1080"
-							:title="currentItem?.name"
+							:title="item?.name"
 							class="vw90"
 						>
-					</template>
-					<template v-else>
-						<div class="file-info txt-white flex m_block align-items-start gap-025">
+						<div v-else class="file-info txt-white flex m_block align-items-start gap-025">
 							<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
 							<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
 
@@ -146,21 +145,21 @@ defineExpose({ open, close })
 								<p class="mx-0 light">
 									File:
 									<span class="semi word-break-all ">
-										{{ currentItem?.name }}
+										{{ item?.name }}
 									</span>
 								</p>
 								<p class="mx-0 ">
 									Type:
 									<span class="semi">
-										{{ currentItem?.type }}
+										{{ item?.type }}
 									</span>
 								</p>
-								<Btn :href="currentItem?.src" target="_blank" round thin class="mt-1" value="Open file" />
+								<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
 								<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
 							</div>
 						</div>
 					</template>
-				</div>
+				</Carousel>
 				<div
 					v-if="group && group.length > 1"
 					class="flex justify-content-center mt-2 overflow
@@ -222,11 +221,16 @@ defineExpose({ open, close })
 }
 
 .bgl-lightbox-item * {
-	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
 	animation: 200ms ease bgl-lightbox-load;
+	transition: max-height 200ms ease;
+}
+
+.bgl-lightbox-item.zoomed * {
+	max-height: calc(100vh - 90px);
+	height: calc(100vh - 90px);
 }
 
 .navigation {
@@ -234,11 +238,6 @@ defineExpose({ open, close })
 	transform: translateY(-50%);
 }
 
-.navigation-btn {
-	width: var(--input-height);
-	height: var(--input-height);
-}
-
 .thumbnail {
 	height: 50px;
 	width: 50px;

package/src/plugins/modal.ts

@@ -17,7 +17,12 @@ export interface ModalOptions {
 export interface ModalFormOptions extends ModalOptions {
 	'schema': BglFormSchemaFnT<any>
 	'onSubmit'?: (formData: any) => any
+	'submitText'?: string
+	'cancelText'?: string
+	'deleteText'?: string
+	'duplicateText'?: string
 	'onDelete'?: (id: string) => Promise<void>
+	'onDuplicate'?: (formData: any) => Promise<void>
 	'onError'?: (err: any) => void
 	'modelValue'?: { [key: string]: any }
 	'onUpdate:modelValue'?: (val: any) => void

package/src/types/BagelForm.ts

@@ -36,6 +36,7 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T>
+	'slots'?: { [key: string]: any }
 	'defaultValue'?: any
 	'transform'?: (val?: any, rowData?: T) => any
 	'onUpdate'?: (val: any, rowData?: T) => void