@bagelink/vue 0.0.819 → 0.0.821

package/dist/style.css

@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-619a1cb2] {
+.blocker[data-v-e588f5a7] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-619a1cb2] {
+.bgl-slider[data-v-e588f5a7] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,66 +367,44 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-619a1cb2] {
+.autoHeight[data-v-e588f5a7] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-619a1cb2] {
+.bgl-slider.allowScroll[data-v-e588f5a7] {
 	overflow-x: scroll;
 }
-.bgl-slider.slides-6[data-v-619a1cb2] {
-	grid-auto-columns: 15.9%;
+.bgl-slider[data-v-e588f5a7] {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.slides-5[data-v-619a1cb2] {
-	grid-auto-columns: 19.3%;
-	gap: 1%;
-}
-.bgl-slider.slides-4[data-v-619a1cb2] {
-	grid-auto-columns: 24.3%;
-	gap: 1%;
-}
-.bgl-slider.slides-3[data-v-619a1cb2] {
-	grid-auto-columns: 33%;
-	gap: 1%;
+.bgl-slider.odd[data-v-e588f5a7] {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-2[data-v-619a1cb2] {
-	grid-auto-columns: 50%;
-	gap: 1%;
-}
-.bgl-slider.slides-1[data-v-619a1cb2] {
+.bgl-slider.slides-1[data-v-e588f5a7] {
 	grid-auto-columns: 100%;
+	gap: 0;
 }
-.bgl-slider[data-v-619a1cb2]::-webkit-scrollbar {
+.bgl-slider[data-v-e588f5a7]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-619a1cb2] * {
+.bgl-slider[data-v-e588f5a7] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-619a1cb2] {
+.dragging.bgl-slider[data-v-e588f5a7] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-619a1cb2] {
+.clicking.bgl-slider[data-v-e588f5a7] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-619a1cb2] * {
+.dragging.bgl-slider[data-v-e588f5a7] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
-@media screen and (max-width: 1280px) {
-.bgl-slider.slides-4[data-v-619a1cb2] {
-		grid-auto-columns: 33%;
-}
-}
-@media screen and (max-width: 991px) {
-.bgl-slider.slides-4[data-v-619a1cb2] {
-		grid-auto-columns: 50%;
-}
-}
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-4[data-v-619a1cb2] {
-		grid-auto-columns: 100%;
+.bgl-slider.slides-1[data-v-e588f5a7]  * {
+		margin-inline-start: 1%;
 }
 }
 
@@ -728,7 +706,7 @@ data[data-v-6c27f163] {
 }
 }
 
-.fileUploadWrap[data-v-1db5afa3] {
+.fileUploadWrap[data-v-bfb0bd63] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -740,7 +718,7 @@ data[data-v-6c27f163] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1db5afa3] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-bfb0bd63] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -748,14 +726,14 @@ data[data-v-6c27f163] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-1db5afa3],
-.fileUploadWrap[data-v-1db5afa3]:hover {
+.fileUploadWrap.dragover[data-v-bfb0bd63],
+.fileUploadWrap[data-v-bfb0bd63]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-1db5afa3] {
+.fileUploadWrap[style*="height: auto;"][data-v-bfb0bd63] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-1db5afa3] {
+.multi-image-item-preview[data-v-bfb0bd63] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -769,12 +747,12 @@ data[data-v-6c27f163] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-1db5afa3] {
+.multi-image-item-preview p[data-v-bfb0bd63] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-1db5afa3]{
+.multi-preview[data-v-bfb0bd63]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -785,17 +763,17 @@ data[data-v-6c27f163] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-1db5afa3]{
+.bgl-single-preview[data-v-bfb0bd63]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-1db5afa3]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-bfb0bd63]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-1db5afa3] {
+.single-image-item-preview[data-v-bfb0bd63] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -803,13 +781,13 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-1db5afa3] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-bfb0bd63] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-1db5afa3] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-bfb0bd63] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-1db5afa3]{
+.single-preview[data-v-bfb0bd63]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -817,19 +795,31 @@ data[data-v-6c27f163] {
 	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-1db5afa3] {
+.single-image-item-preview[data-v-bfb0bd63]:hover::after{
+	content: "zoom_in";
+	font-size: 32px;
+	font-family: "Material Symbols Outlined", serif;
+	position: absolute;
+	border-radius: 100%;
+	color: var(--bgl-white);
+	z-index: 9;
+	pointer-events: none;
+}
+.single-image-item-preview:hover img[data-v-bfb0bd63]{
+	filter: brightness(70%);
+}
+.bgl_fill-image.single-image-item-preview[data-v-bfb0bd63] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-1db5afa3]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-bfb0bd63]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-1db5afa3] {
+.single-image-item-preview .pie[data-v-bfb0bd63] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -843,31 +833,31 @@ data[data-v-6c27f163] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-1db5afa3] {
+.bgl_oval-upload[data-v-bfb0bd63] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-1db5afa3] {
+.bgl_oval-upload p[data-v-bfb0bd63] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-1db5afa3]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-bfb0bd63]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-1db5afa3] {
+.bgl_oval-upload .pie[data-v-bfb0bd63] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-1db5afa3] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-bfb0bd63] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-1db5afa3]{
+.bgl_oval-upload .single-image-item-preview[data-v-bfb0bd63]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-1db5afa3] {
+.bgl_oval-upload .single-preview[data-v-bfb0bd63] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-1db5afa3] {
+.pie[data-v-bfb0bd63] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -875,7 +865,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-1db5afa3]:before {
+.pie[data-v-bfb0bd63]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -893,26 +883,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-1db5afa3] {
+.pie .success[data-v-bfb0bd63] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-1db5afa3] {
+.pie .progress[data-v-bfb0bd63] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-1db5afa3] {
+.pie.complete .progress[data-v-bfb0bd63] {
 	display: none;
 }
-.pie.complete .success[data-v-1db5afa3] {
+.pie.complete .success[data-v-bfb0bd63] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-1db5afa3]:before {
+.pie.complete[data-v-bfb0bd63]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-1db5afa3] {
+.pie.complete[data-v-bfb0bd63] {
 	color: var(--bgl-green);
 }
 
@@ -3160,25 +3150,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-.bgl_pill-btn[data-v-8c7388de]{
+.bgl_pill-btn[data-v-40a0a2e2]{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
 	width: calc(var(--pill-height) / 1.25)!important;
 	height: calc(var(--pill-height) / 1.25)!important;
 }
-.loading[data-v-8c7388de] {
+.loading[data-v-40a0a2e2] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-8c7388de 1s linear infinite;
+  animation: spin-40a0a2e2 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-8c7388de] {
+.bgl_flatPill .loading[data-v-40a0a2e2] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-8c7388de {
+@keyframes spin-40a0a2e2 {
 0% {
     transform: rotate(0deg);
 }
@@ -3186,11 +3176,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-8c7388de] {
+.bgl_pill[data-v-40a0a2e2] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--4779ddec);
-  color: var(--04aaf136);
+  background-color: var(--64b28dae);
+  color: var(--e70b1a78);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3198,26 +3188,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-8c7388de] {
+.bgl_pill[disabled="true"][data-v-40a0a2e2] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-8c7388de] {
+.bgl_pill-flex[data-v-40a0a2e2] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-8c7388de] {
+.bgl_pill.bgl_flatPill[data-v-40a0a2e2] {
   background: transparent;
 }
-.bgl_pill.round[data-v-8c7388de] {
+.bgl_pill.round[data-v-40a0a2e2] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-8c7388de] {
-  outline: 1px solid var(--4779ddec);
-  color: var(--4779ddec);
+.bgl_pill-border[data-v-40a0a2e2] {
+  outline: 1px solid var(--64b28dae);
+  color: var(--64b28dae);
   background: transparent;
 }
 

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { Attributes, BglFormSchemaT } from '..';
-export declare function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
+export declare function debounce<T extends (...args: Parameters<T>) => ReturnType<T>>(callback: T, wait: number, immediate?: boolean): (...args: Parameters<T>) => void;
 export declare function keyToLabel(key?: string): string | undefined;
 export declare function copyText(text: string, cb?: (msg: string) => void): Promise<void>;
 export declare function initials(...strArr: string[]): string;
@@ -17,6 +17,6 @@ export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export { formatString } from './strings';
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
-export declare const sleep: (ms?: number) => Promise<unknown>;
+export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAYpH;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAUhG;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,CAAC,CAAC,CAa3F;AAED,eAAO,MAAM,KAAK,QAAQ,MAAM,qBAA0D,CAAA;AAE1F,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAYvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAaP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD"}

package/package.json

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

package/src/components/Carousel.vue

@@ -25,6 +25,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:index'])
 const bglSlider = $ref<HTMLElement>()
+let itemCount = $ref(props.items)
 let activeSlideIndex = $ref(0)
 let isDragging = $ref(false)
 let startX = $ref(0)
@@ -55,6 +56,7 @@ function evalHeight() {
 
 function scrollEase(target: number, duration: number = 500) {
 	if (!bglSlider) return
+	if (isPressed) return
 	const start = bglSlider.scrollLeft
 	const change = target - start
 	const startTime = performance.now()
@@ -103,23 +105,29 @@ watch(
 		emit('update:index', activeSlideIndex) }
 )
 
-function scrollEnd() {
-	const slider = bglSlider
-	if (!slider || props.items !== 1) return
-	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
+function goToSlideScrollEnd() {
+	if (!bglSlider) return
+	const isDragForward = startX > bglSlider.offsetLeft
+	if (itemCount === 1) {
+		if (isDragForward) activeSlideIndex = Math.ceil(bglSlider.scrollLeft / bglSlider.offsetWidth)
+		else activeSlideIndex = Math.floor(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	} else {
+		activeSlideIndex = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	}
+	startX = 0
+	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
 	goToSlide(nextSlide)
 }
 
+let timeout: any = null
+
+function scrollEnd() {
+	if (timeout) clearTimeout(timeout)
+	timeout = setTimeout(goToSlideScrollEnd, 400)
+}
+
 function stopDragging(e: MouseEvent) {
 	isPressed = false
-	const slider = bglSlider
-	if (!slider) return
-	const isDragForward = startX > e.pageX + slider.offsetLeft
-	if (isDragForward)
-		activeSlideIndex = Math.ceil(slider.scrollLeft / slider.offsetWidth)
-	else activeSlideIndex = Math.floor(slider.scrollLeft / slider.offsetWidth)
-	if (props.items === 1) goToSlide(activeSlideIndex)
-	startX = 0
 	document.removeEventListener('mousemove', move)
 	document.removeEventListener('mouseup', stopDragging)
 	document.removeEventListener('dragend', stopDragging)
@@ -143,7 +151,7 @@ function startDragging(e: MouseEvent) {
 	isPressed = true
 	document.addEventListener('mousemove', move)
 	document.addEventListener('mouseup', stopDragging)
-	document.addEventListener('dragend', stopDragging)
+	// document.addEventListener('dragend', stopDragging)
 }
 
 function next() {
@@ -163,12 +171,18 @@ function prev() {
 
 function evalWidth() {
 	if (!bglSlider) return
+	if (window.innerWidth < 600) itemCount = 1
+	else if (window.innerWidth < 991) itemCount = Math.min(props.items, 2)
+	else if (window.innerWidth < 1280) itemCount = Math.min(props.items, 3)
+	else itemCount = props.items
+	console.log(itemCount, window.innerWidth)
 	goToSlide(activeSlideIndex)
 }
 
 onMounted(() => {
 	window.addEventListener('resize', evalWidth)
 	evalHeight()
+	evalWidth()
 	disableDrag()
 })
 
@@ -182,10 +196,15 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 			:class="{
 				dragging: isDragging,
 				clicking: isPressed,
-				[`slides-${items}`]: true,
 				allowScroll,
+				odd: itemCount % 2 !== 0,
+				[`slides-${itemCount}`]: itemCount === 1,
 			}"
 			class="bgl-slider"
+			:style="{
+				'--item-count': itemCount,
+			}"
+			@scroll.active="scrollEnd"
 			@mousedown="startDragging"
 		>
 			<div v-if="isDragging" class="blocker" />
@@ -230,33 +249,18 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 	overflow-x: scroll;
 }
 
-.bgl-slider.slides-6 {
-	grid-auto-columns: 15.9%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-5 {
-	grid-auto-columns: 19.3%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-4 {
-	grid-auto-columns: 24.3%;
-	gap: 1%;
-}
-
-.bgl-slider.slides-3 {
-	grid-auto-columns: 33%;
+.bgl-slider {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
 
-.bgl-slider.slides-2 {
-	grid-auto-columns: 50%;
-	gap: 1%;
+.bgl-slider.odd {
+	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
 
 .bgl-slider.slides-1 {
 	grid-auto-columns: 100%;
+	gap: 0;
 }
 
 .bgl-slider::-webkit-scrollbar {
@@ -282,21 +286,10 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 	user-select: none;
 }
 
-@media screen and (max-width: 1280px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 33%;
-	}
-}
-
-@media screen and (max-width: 991px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 50%;
-	}
-}
-
 @media screen and (max-width: 600px) {
-	.bgl-slider.slides-4 {
-		grid-auto-columns: 100%;
+	.bgl-slider.slides-1  * {
+		margin-inline-start: 1%;
 	}
+
 }
 </style>

package/src/components/Pill.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { Btn, MaterialIcon } from '@bagelink/vue'
 import { useSlots } from 'vue'
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 
 interface BtnProp {
 	icon: MaterialIcons

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

@@ -270,7 +270,16 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<img v-if="isImage(file.extension || file.url)" v-lightbox class="single-preview" :src="file.url" alt="">
+						<div v-if="isImage(file.extension || file.url)" class="h-100">
+							<img v-lightbox class="single-preview" :src="file.url" alt="">
+							<div class="position-start m-05 gap-025 flex">
+								<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click.stop="removeFile(file)" />
+								<Btn
+									v-tooltip="'Replace'" color="gray" thin icon="autorenew"
+									@click="browse"
+								/>
+							</div>
+						</div>
 						<Icon v-else :size="4" weight="2" icon="draft" class="color-primary w-100" />
 					</div>
 
@@ -407,8 +416,21 @@ function drop(e: DragEvent) {
 	height: calc(100% - 2rem);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	box-shadow: 0 0 10px #00000012;
 }
+.single-image-item-preview:hover::after{
+	content: "zoom_in";
+	font-size: 32px;
+	font-family: "Material Symbols Outlined", serif;
+	position: absolute;
+	border-radius: 100%;
+	color: var(--bgl-white);
+	z-index: 9;
+	pointer-events: none;
+}
+.single-image-item-preview:hover img{
+	filter: brightness(70%);
+}
+
 .bgl_fill-image.single-image-item-preview {
 	height: 100%;
 }