@bagelink/vue 0.0.712 → 0.0.714

package/dist/style.css

@@ -626,6 +626,10 @@ a[data-v-895cf824] {
 .list-item.router-link-active {
 	background-color: var(--bgl-primary-light);
 }
+.notClickable:hover{
+	background-color:unset;
+	cursor: default;
+}
 .list-item:active {
 	-webkit-filter: var(--bgl-hover-filter);
 	filter: var(--bgl-hover-filter);
@@ -1724,71 +1728,146 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-4c71cd49] {
-	--width: 320px;
+.fileUploadWrap[data-v-5911e10d] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	height: calc(var(--width) / 1.5);
 	font-size: var(--input-font-size);
 	overflow-y: auto;
 	background: var(--input-bg);
+	height: 215px;
 }
-.previewName[data-v-4c71cd49] {
-	padding: 0.5rem;
+.bagel-input .fileUploadWrap.fileDropZone[data-v-5911e10d] {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+	flex-direction: column;
+}
+.fileUploadWrap.dragover[data-v-5911e10d],
+.fileUploadWrap[data-v-5911e10d]:hover {
+	box-shadow: inset 0 0 10px #00000012;
+}
+.fileUploadWrap[style*="height: auto;"][data-v-5911e10d] {
+	min-height: 215px;
+}
+.multi-image-item-preview[data-v-5911e10d] {
+	border: 1px solid var(--border-color) !important;
+	border-radius: var(--input-border-radius);
+	margin: 0.5rem !important;
+	background: var(--bgl-white);
+	padding: 0;
+	padding-inline-end: 0.75rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
 	grid-template-columns: auto 1fr 22px;
 	gap: 1rem;
 	align-items: center;
-	padding-inline: 14px;
 }
-.previewName p[data-v-4c71cd49] {
+.multi-image-item-preview p[data-v-5911e10d] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-4c71cd49] {
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
-	padding: 5px;
-	min-height: 90px;
-}
-img.preview[data-v-4c71cd49] {
-	/* max-height: calc(var(--width) / 2); */
-	/* max-width: calc(var(--width) * 2); */
+.multi-preview[data-v-5911e10d]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	box-shadow: 0 0 10px #00000012;
+	text-align: center !important;
+	justify-content: center;
+	align-items: center;
+	display: flex;
 }
-img.preview.single[data-v-4c71cd49] {
-	max-width: var(--width);
-	width: calc(100% - 2.75rem);
-	object-fit: contain;
-	height: auto;
-	max-height: calc(var(--width) / 2);
-	margin: 1rem;
+.bgl-single-preview[data-v-5911e10d]{
+	height: 100%;
+	position: relative;
 }
-.fileUploadWrap.dragover[data-v-4c71cd49],
-.fileUploadWrap[data-v-4c71cd49]:hover {
-	box-shadow: inset 0 0 10px #00000012;
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-5911e10d]{
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	top: calc(50% - 2rem);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-4c71cd49] {
-	background: var(--input-bg);
+.single-image-item-preview[data-v-5911e10d] {
+	height: 100%;
+	min-height: 100%;
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--bgl-gray);
-	flex-direction: column;
 }
-.pie[data-v-4c71cd49] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-5911e10d] {
+	min-height: 215px;
+}
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-5911e10d] {
+	margin: 0rem !important;
+}
+.single-preview[data-v-5911e10d]{
+	border-radius: var(--input-border-radius);
+	margin: 1rem;
+	padding: 0px;
+	min-height: calc(100% - 2rem);
+	height: calc(100% - 2rem);
+	object-fit: cover;
+	background: var(--bgl-gray-light);
+	box-shadow: 0 0 10px #00000012;
+}
+.bgl_fill-image.single-image-item-preview[data-v-5911e10d] {
+	height: 100%;
+}
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-5911e10d]{
+	border-radius: unset;
+	object-fit: cover;
+	box-shadow: unset;
+	width: 100%;
+	height: auto;
+}
+.single-image-item-preview .pie[data-v-5911e10d] {
+	transform-origin: top;
+	transform: scale(1.4);
+	position: absolute;
+	text-align: center;
+	inset: 0;
+	margin: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	border: none !important;
+	padding: 0 !important;
+}
+.bgl_oval-upload[data-v-5911e10d] {
+	border-radius: 100% !important;
+	overflow: hidden;
+}
+.bgl_oval-upload p[data-v-5911e10d] {
+		padding: 0.75rem !important;
+		font-size: 12px
+}
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-5911e10d]{
+		top: 0;
+}
+.bgl_oval-upload .pie[data-v-5911e10d] {
+		transform: scale(1);
+}
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-5911e10d] {
+		transform: scale(0.4) !important;
+}
+.bgl_oval-upload .single-image-item-preview[data-v-5911e10d]{
+		height: 100%;
+}
+.bgl_oval-upload .single-preview[data-v-5911e10d] {
+		margin: 0;
+		height: 100% !important;
+}
+.pie[data-v-5911e10d] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1796,7 +1875,7 @@ img.preview.single[data-v-4c71cd49] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-4c71cd49]:before {
+.pie[data-v-5911e10d]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1814,26 +1893,26 @@ img.preview.single[data-v-4c71cd49] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-4c71cd49] {
+.pie .success[data-v-5911e10d] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-4c71cd49] {
+.pie .progress[data-v-5911e10d] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-4c71cd49] {
+.pie.complete .progress[data-v-5911e10d] {
 	display: none;
 }
-.pie.complete .success[data-v-4c71cd49] {
+.pie.complete .success[data-v-5911e10d] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-4c71cd49]:before {
+.pie.complete[data-v-5911e10d]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-4c71cd49] {
+.pie.complete[data-v-5911e10d] {
 	color: var(--bgl-green);
 }
 

package/dist/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const IMAGE_FORMATS: string[];
+export declare const IMAGE_FORMATS_REGEXP: RegExp;
+export declare const VIDEO_FORMATS: string[];
+export declare const VIDEO_FORMATS_REGEXP: RegExp;
+//# sourceMappingURL=constants.d.ts.map

package/dist/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,UAA+E,CAAA;AACzG,eAAO,MAAM,oBAAoB,QAAmD,CAAA;AACpF,eAAO,MAAM,aAAa,UAA0E,CAAA;AACpG,eAAO,MAAM,oBAAoB,QAAmD,CAAA"}

package/dist/utils/objects.d.ts

@@ -1,4 +1,5 @@
 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.712",
+  "version": "0.0.714",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -104,21 +104,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.6.5",
-    "@tiptap/extension-table": "^2.6.5",
-    "@tiptap/extension-table-cell": "^2.6.5",
-    "@tiptap/extension-table-header": "^2.6.5",
-    "@tiptap/extension-table-row": "^2.6.5",
-    "@tiptap/extension-youtube": "^2.6.5",
-    "@tiptap/pm": "^2.6.5",
-    "@tiptap/starter-kit": "^2.6.5",
-    "@tiptap/vue-3": "^2.6.5",
+    "@tiptap/extension-image": "^2.6.6",
+    "@tiptap/extension-table": "^2.6.6",
+    "@tiptap/extension-table-cell": "^2.6.6",
+    "@tiptap/extension-table-header": "^2.6.6",
+    "@tiptap/extension-table-row": "^2.6.6",
+    "@tiptap/extension-youtube": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
+    "@tiptap/vue-3": "^2.6.6",
     "@vuepic/vue-datepicker": "^8.8.1",
-    "@vueuse/core": "^11.0.1",
-    "axios": "^1.7.4",
+    "@vueuse/core": "^11.0.3",
+    "axios": "^1.7.5",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.11.7",
-    "signature_pad": "^5.0.2",
+    "signature_pad": "^5.0.3",
     "type-fest": "^4.25.0"
   },
   "scripts": {

package/src/components/ListItem.vue

@@ -17,8 +17,8 @@ defineProps<{
 	<component
 		:is="to ? 'RouterLink' : 'div'"
 		:to="to"
-		class="flex gap-1"
-		:class="{ 'list-item': to || onClick, 'no-border-list': flat }"
+		class="flex gap-1 list-item"
+		:class="{ 'notClickable': !(to || onClick), 'no-border-list': flat }"
 	>
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
@@ -63,7 +63,10 @@ defineProps<{
 .list-item.router-link-active {
 	background-color: var(--bgl-primary-light);
 }
-
+.notClickable:hover{
+	background-color:unset;
+	cursor: default;
+}
 .list-item:active {
 	-webkit-filter: var(--bgl-hover-filter);
 	filter: var(--bgl-hover-filter);

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { Btn, Icon, type StorageFile, useBagel } from '@bagelink/vue'
+import { Btn, IMAGE_FORMATS, IMAGE_FORMATS_REGEXP, Icon, type StorageFile, useBagel } from '@bagelink/vue'
 
 const props = defineProps<{
 	label?: string
@@ -9,7 +9,10 @@ const props = defineProps<{
 	bindkey?: StrKey
 	modelValue?: FSValue
 	width?: string
+	height?: string | 'auto'
 	topic?: string
+	fill?: boolean
+	oval?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -30,6 +33,8 @@ type FSValue = string[] | string | number
 
 const bindKey: StrKey = props.bindkey || 'id'
 
+const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
+
 let file_bindkeys = $ref<FSValue>(props.modelValue || [])
 const storageFiles = $ref<StorageFile[]>([])
 
@@ -174,25 +179,26 @@ function drop(e: DragEvent) {
 		<div
 			class="fileUploadWrap"
 			:class="{
-				fileDropZone: !storageFiles.length && !fileQueue.length,
-				dragover: isDragOver,
+				'fileDropZone': !storageFiles.length && !fileQueue.length,
+				'dragover': isDragOver,
+				'bgl_oval-upload': oval,
 			}"
+			:style="{ width: props.width, height: props.height || '215px' }"
 			@click="browse"
 			@dragover="dragover"
 			@drop="drop"
 			@dragleave="dragleave"
 		>
 			<slot name="files" :files="storageFiles" :fileQueue>
-				<template v-for="file in storageFiles" :key="file.id">
-					<div v-if="!multiple" class="single-image">
-						<img class="single preview" :src="file.url" alt="">
-						<!-- <p class="no-margin">
-						{{ file.name }}
-					</p> -->
-					</div>
-					<div v-if="multiple" class="multi-image-item previewName">
-						<img class="preview" :src="file.url" alt="">
-						<p class="no-margin">
+				<div v-if="multiple" class="bgl-multi-preview">
+					<div
+						v-for="file in storageFiles"
+						:key="file.id"
+						class="multi-image-item-preview"
+					>
+						<img v-if="isImage(file.extension || file.url)" class="multi-preview" :src="file.url" alt="">
+						<Icon v-else icon="draft" class="multi-preview" />
+						<p class="m-0">
 							{{ file.name }}
 						</p>
 						<Btn
@@ -203,20 +209,24 @@ function drop(e: DragEvent) {
 							@click.stop="removeFile(file)"
 						/>
 					</div>
-				</template>
-				<template v-for="fileQ in fileQueue" :key="fileQ.file">
-					<div v-if="!multiple" class="imagePreviewWrap">
-						<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
-					</div>
-					<div class="previewName">
-						<img
-							v-if="multiple"
-							:width="width || '220'"
-							class="preview"
-							:src="fileToUrl(fileQ.file)"
-							alt=""
-						>
-						<p class="no-margin">
+					<div
+						v-for="fileQ in fileQueue"
+						:key="fileQ.file.name"
+						class="multi-image-item-preview"
+					>
+						<template v-if="isImage(fileQ.file.type)">
+							<img
+								v-if="multiple"
+								:width="width || '220'"
+								class="multi-preview"
+								:src="fileToUrl(fileQ.file)"
+								alt=""
+							>
+						</template>
+
+						<Icon v-else icon="draft" class="multi-preview" />
+
+						<p class="no-margin multi-preview-txt">
 							{{ fileQ.name }}
 						</p>
 						<div
@@ -231,7 +241,40 @@ function drop(e: DragEvent) {
 							<Icon class="success" icon="check" />
 						</div>
 					</div>
-				</template>
+				</div>
+
+				<div v-if="!multiple" class="bgl-single-preview">
+					<div
+						v-for="file in storageFiles"
+						:key="file.id"
+						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="">
+						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
+					</div>
+
+					<div
+						v-for="fileQ in fileQueue"
+						:key="fileQ.file.name"
+						class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<div
+							class="pie"
+							:style="`--p:${fileQ.progress}`"
+							style="--b: 2px"
+							:class="{ complete: fileQ.progress === 100 }"
+						>
+							<span v-if="fileQ.progress < 100" class="progress">
+								{{ `${fileQ.progress.toFixed(0)}` }}
+							</span>
+							<Icon class="success" icon="check" />
+						</div>
+						<img v-if="isImage(fileQ.file.type)" class="single-preview" :src="fileToUrl(fileQ.file)" alt="">
+						<!-- <Icon v-else :size="8" weight="2" icon="draft" class="color-primary" /> -->
+					</div>
+				</div>
 			</slot>
 			<slot
 				v-if="(!storageFiles.length && !fileQueue.length) || multiple"
@@ -240,85 +283,163 @@ function drop(e: DragEvent) {
 				:fileQueue
 				:browse
 			>
-				<p>Drop files here or click to upload</p>
+				<p class="p-1 flex column hover fileUploadPlaceHolder">
+					<Icon icon="upload_2" />
+					Drop files here or click to upload
+				</p>
 			</slot>
 		</div>
 	</div>
 </template>
 
 <style scoped>
-.bagel-input .fileUploadWrap {
-	--width: 320px;
+.fileUploadWrap {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	height: calc(var(--width) / 1.5);
 	font-size: var(--input-font-size);
 	overflow-y: auto;
 	background: var(--input-bg);
+	height: 215px;
+}
+.bagel-input .fileUploadWrap.fileDropZone {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+	flex-direction: column;
+}
+
+.fileUploadWrap.dragover,
+.fileUploadWrap:hover {
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.fileUploadWrap[style*="height: auto;"] {
+	min-height: 215px;
 }
 
-.previewName {
-	padding: 0.5rem;
+.multi-image-item-preview {
+	border: 1px solid var(--border-color) !important;
+	border-radius: var(--input-border-radius);
+	margin: 0.5rem !important;
+	background: var(--bgl-white);
+	padding: 0;
+	padding-inline-end: 0.75rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
 	grid-template-columns: auto 1fr 22px;
 	gap: 1rem;
 	align-items: center;
-	padding-inline: 14px;
 }
-
-.previewName p {
+.multi-image-item-preview p {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-
-.imagePreviewWrap {
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
-	padding: 5px;
-	min-height: 90px;
-}
-
-img.preview {
-	/* max-height: calc(var(--width) / 2); */
-	/* max-width: calc(var(--width) * 2); */
+.multi-preview{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	box-shadow: 0 0 10px #00000012;
+	text-align: center !important;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+}
+.bgl-single-preview{
+	height: 100%;
+	position: relative;
+}
+.bgl-single-preview + .fileUploadPlaceHolder{
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	top: calc(50% - 2rem);
+}
+.single-image-item-preview {
+	height: 100%;
+	min-height: 100%;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview {
+	min-height: 215px;
 }
 
-img.preview.single {
-	max-width: var(--width);
-	width: calc(100% - 2.75rem);
-	object-fit: contain;
-	height: auto;
-	max-height: calc(var(--width) / 2);
+.fileUploadWrap[style*="height: auto"] .single-preview {
+	margin: 0rem !important;
+
+}
+.single-preview{
+	border-radius: var(--input-border-radius);
 	margin: 1rem;
+	padding: 0px;
+	min-height: calc(100% - 2rem);
+	height: calc(100% - 2rem);
+	object-fit: cover;
+	background: var(--bgl-gray-light);
+	box-shadow: 0 0 10px #00000012;
 }
-
-.fileUploadWrap.dragover,
-.fileUploadWrap:hover {
-	box-shadow: inset 0 0 10px #00000012;
+.bgl_fill-image.single-image-item-preview {
+	height: 100%;
+}
+.bgl_fill-image.single-image-item-preview .single-preview{
+	border-radius: unset;
+	object-fit: cover;
+	box-shadow: unset;
+	width: 100%;
+	height: auto;
 }
 
-.bagel-input .fileUploadWrap.fileDropZone {
-	background: var(--input-bg);
+.single-image-item-preview .pie {
+	transform-origin: top;
+	transform: scale(1.4);
+	position: absolute;
+	text-align: center;
+	inset: 0;
+	margin: auto;
 	display: flex;
-	align-items: center;
 	justify-content: center;
-	color: var(--bgl-gray);
-	flex-direction: column;
+	align-items: center;
+	background: transparent;
+	border: none !important;
+	padding: 0 !important;
 }
 
+.bgl_oval-upload {
+	border-radius: 100% !important;
+	overflow: hidden;
+	}
+.bgl_oval-upload p {
+		padding: 0.75rem !important;
+		font-size: 12px
+	}
+.bgl_oval-upload .fileUploadPlaceHolder{
+		top: 0;
+	}
+	.bgl_oval-upload .pie {
+		transform: scale(1);
+	}
+	.bgl_oval-upload span.bgl_icon-font.color-primary {
+		transform: scale(0.4) !important;
+	}
+	.bgl_oval-upload .single-image-item-preview{
+		height: 100%;
+	}
+	.bgl_oval-upload .single-preview {
+		margin: 0;
+		height: 100% !important;
+	}
+
 .pie {
 	width: 30px;
 	height: 30px;

package/src/index.ts

@@ -12,4 +12,5 @@ export * from './types'
 export * from './composables'
 export * from './components'
 export * from './utils/allCountries'
+export * from './utils/constants'
 import './styles/bagel.css'