@bagelink/vue 0.0.1143 → 0.0.1147

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1143",
+  "version": "0.0.1147",
   "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/FieldArray.vue

@@ -78,21 +78,22 @@ const computedField = $computed(
 			{{ label }}
 		</p>
 
-		<div v-if="schema" class="-ms-05 ps-05 border-start">
-			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
+		<div v-if="schema" class="ps-025 border-start">
+			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden">
 				<BglForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
-				<Btn
-					v-if="props.delete"
-					icon="delete"
-					value="Delete"
-					class="txt10 opacity-7 color-red"
-					thin
-					flat
-					@click="deleteItem(i)"
-				/>
+				<div class="bg-gray-80 -my-05 px-025 pt-065 txt-center">
+					<Btn
+						v-if="props.delete"
+						icon="delete"
+						class="txt10 opacity-7"
+						thin
+						flat
+						@click="deleteItem(i)"
+					/>
+				</div>
 			</div>
 			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
-				<p>Add {{ label }}</p>
+				<p>{{ label }}</p>
 			</Btn>
 		</div>
 		<template v-else>
@@ -103,9 +104,15 @@ const computedField = $computed(
 
 <style>
 .itemBox{
-	/* border-top: 2px solid var(--bgl-gray); */
-	/* border-bottom: 2px solid var(--bgl-gray); */
 	background: var(--input-bg);
+	grid-template-columns: 1fr auto;
+	display: grid;
+	--label-font-size: 0.6rem;
+	--input-height: 30px;
+	--input-font-size: 14px;
+}
+.pt-065{
+	padding-top: 0.65rem;
 }
 
 .itemBox .bagel-input input,
@@ -114,4 +121,7 @@ const computedField = $computed(
 .itemBox .custom-select .input {
 	background: var(--bgl-white) !important;
 }
+.itemBox .bagel-input{
+	margin-bottom: 0.15rem !important;
+}
 </style>

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

@@ -43,6 +43,9 @@ const {
 	accept?: string
 	required?: boolean
 	disabled?: boolean
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -258,10 +261,9 @@ function drop(e: DragEvent) {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<div
 				v-for="file in storageFiles"
@@ -295,10 +297,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 txt16"
+						>
+							{{ file.name }}
+						</p>
+					</div>
+
 					<Btn
 						thin
 						flat
@@ -312,7 +325,7 @@ function drop(e: DragEvent) {
 				v-if="!storageFiles.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 		<div
@@ -482,7 +495,9 @@ function drop(e: DragEvent) {
 					class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05"
 				>
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>

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) => {
@@ -103,7 +103,9 @@ watch(() => modelValue, (newVal) => {
 		}"
 	>
 		<div :for="id">
-			{{ label }}
+			<label>
+				{{ label }}
+			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
 

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

@@ -88,7 +88,7 @@ watch(() => editor.state.content, (newValue) => {
 <template>
 	<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 }">
+		<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 			<EditorToolbar
 				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 				@action="commands.execute"

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

@@ -18,6 +18,10 @@ const props = withDefaults(defineProps<{
 	required?: boolean
 	disabled?: boolean
 	baseURL?: string
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
+
 }>(), {
 	height: '215px',
 	theme: 'dropzone',
@@ -155,10 +159,9 @@ watch(() => props.dirPath, () => {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<template v-for="path_key in pathKeys" :key="path_key">
 				<div class="txt-gray txt-12 flex">
@@ -184,12 +187,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 txt16"
+							>
+								{{ path_key.split('/').pop() }}
+							</p>
+						</div>
 					</div>
 				</div>
 			</template>
@@ -198,7 +204,7 @@ watch(() => props.dirPath, () => {
 				v-if="!pathKeys.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 
@@ -360,9 +366,11 @@ watch(() => props.dirPath, () => {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>

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