@bagelink/vue 0.0.815 → 0.0.819

package/dist/style.css

@@ -1,14 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
-.accordion-item[data-v-c1663af0] {
+.accordion-item[data-v-9d8335fa] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-item button[data-v-c1663af0]{
+.accordion-item button[data-v-9d8335fa] {
 	cursor: pointer;
 }
-.accordion-head[data-v-c1663af0] {
+.accordion-head[data-v-9d8335fa] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -16,20 +16,28 @@
 	align-items: center;
 	justify-content: space-between;
 	border: none;
+	color: inherit !important;
 }
-.accordion-icon[data-v-c1663af0] {
+.accordion-icon[data-v-9d8335fa] {
 	transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	width: calc( var(--btn-height) / 1.5);
+	height: calc( var(--btn-height) / 1.5);
+	padding-inline: calc(var(--btn-padding) / 3);
 }
-.accordion-icon.open[data-v-c1663af0] {
+.accordion-icon.open[data-v-9d8335fa] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-c1663af0] {
+.accordion-label[data-v-9d8335fa] {
 	font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-c1663af0] {
-	text-decoration: underline;
+.flat.accordion-item[data-v-9d8335fa] {
+	border-bottom: none
 }
-.accordion-body[data-v-c1663af0] {
+.accordion-head:hover .accordion-label[data-v-9d8335fa] {
+	text-decoration: underline;
 }
 
 .expand-enter-active,
@@ -342,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-1f9c6644] {
+.blocker[data-v-619a1cb2] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -350,74 +358,74 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-1f9c6644] {
+.bgl-slider[data-v-619a1cb2] {
 	display: grid;
 	position: relative;
-	scroll-behavior: smooth;
+	/* scroll-behavior: smooth; */
 	grid-auto-flow: column;
 	grid-auto-columns: 100%;
-	scroll-snap-type: x mandatory;
+	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-1f9c6644] {
+.autoHeight[data-v-619a1cb2] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-1f9c6644] {
+.bgl-slider.allowScroll[data-v-619a1cb2] {
 	overflow-x: scroll;
 }
-.bgl-slider.slides-6[data-v-1f9c6644] {
+.bgl-slider.slides-6[data-v-619a1cb2] {
 	grid-auto-columns: 15.9%;
 	gap: 1%;
 }
-.bgl-slider.slides-5[data-v-1f9c6644] {
+.bgl-slider.slides-5[data-v-619a1cb2] {
 	grid-auto-columns: 19.3%;
 	gap: 1%;
 }
-.bgl-slider.slides-4[data-v-1f9c6644] {
+.bgl-slider.slides-4[data-v-619a1cb2] {
 	grid-auto-columns: 24.3%;
 	gap: 1%;
 }
-.bgl-slider.slides-3[data-v-1f9c6644] {
+.bgl-slider.slides-3[data-v-619a1cb2] {
 	grid-auto-columns: 33%;
 	gap: 1%;
 }
-.bgl-slider.slides-2[data-v-1f9c6644] {
+.bgl-slider.slides-2[data-v-619a1cb2] {
 	grid-auto-columns: 50%;
 	gap: 1%;
 }
-.bgl-slider.slides-1[data-v-1f9c6644] {
+.bgl-slider.slides-1[data-v-619a1cb2] {
 	grid-auto-columns: 100%;
 }
-.bgl-slider[data-v-1f9c6644]::-webkit-scrollbar {
+.bgl-slider[data-v-619a1cb2]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-1f9c6644] * {
+.bgl-slider[data-v-619a1cb2] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-1f9c6644] {
+.dragging.bgl-slider[data-v-619a1cb2] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-1f9c6644] {
+.clicking.bgl-slider[data-v-619a1cb2] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-1f9c6644] * {
+.dragging.bgl-slider[data-v-619a1cb2] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 1280px) {
-.bgl-slider.slides-4[data-v-1f9c6644] {
+.bgl-slider.slides-4[data-v-619a1cb2] {
 		grid-auto-columns: 33%;
 }
 }
 @media screen and (max-width: 991px) {
-.bgl-slider.slides-4[data-v-1f9c6644] {
+.bgl-slider.slides-4[data-v-619a1cb2] {
 		grid-auto-columns: 50%;
 }
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-4[data-v-1f9c6644] {
+.bgl-slider.slides-4[data-v-619a1cb2] {
 		grid-auto-columns: 100%;
 }
 }
@@ -720,7 +728,7 @@ data[data-v-6c27f163] {
 }
 }
 
-.fileUploadWrap[data-v-2641a9a6] {
+.fileUploadWrap[data-v-1db5afa3] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -732,7 +740,7 @@ data[data-v-6c27f163] {
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-2641a9a6] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-1db5afa3] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -740,14 +748,14 @@ data[data-v-6c27f163] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-2641a9a6],
-.fileUploadWrap[data-v-2641a9a6]:hover {
+.fileUploadWrap.dragover[data-v-1db5afa3],
+.fileUploadWrap[data-v-1db5afa3]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-2641a9a6] {
+.fileUploadWrap[style*="height: auto;"][data-v-1db5afa3] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-2641a9a6] {
+.multi-image-item-preview[data-v-1db5afa3] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -761,12 +769,12 @@ data[data-v-6c27f163] {
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-2641a9a6] {
+.multi-image-item-preview p[data-v-1db5afa3] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-2641a9a6]{
+.multi-preview[data-v-1db5afa3]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -777,17 +785,17 @@ data[data-v-6c27f163] {
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-2641a9a6]{
+.bgl-single-preview[data-v-1db5afa3]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-2641a9a6]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-1db5afa3]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-2641a9a6] {
+.single-image-item-preview[data-v-1db5afa3] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -795,13 +803,13 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-2641a9a6] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-1db5afa3] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-2641a9a6] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-1db5afa3] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-2641a9a6]{
+.single-preview[data-v-1db5afa3]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -811,17 +819,17 @@ data[data-v-6c27f163] {
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-2641a9a6] {
+.bgl_fill-image.single-image-item-preview[data-v-1db5afa3] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-2641a9a6]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-1db5afa3]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-2641a9a6] {
+.single-image-item-preview .pie[data-v-1db5afa3] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -835,31 +843,31 @@ data[data-v-6c27f163] {
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-2641a9a6] {
+.bgl_oval-upload[data-v-1db5afa3] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-2641a9a6] {
+.bgl_oval-upload p[data-v-1db5afa3] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-2641a9a6]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-1db5afa3]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-2641a9a6] {
+.bgl_oval-upload .pie[data-v-1db5afa3] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-2641a9a6] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-1db5afa3] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-2641a9a6]{
+.bgl_oval-upload .single-image-item-preview[data-v-1db5afa3]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-2641a9a6] {
+.bgl_oval-upload .single-preview[data-v-1db5afa3] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-2641a9a6] {
+.pie[data-v-1db5afa3] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -867,7 +875,7 @@ data[data-v-6c27f163] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-2641a9a6]:before {
+.pie[data-v-1db5afa3]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -885,26 +893,26 @@ data[data-v-6c27f163] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-2641a9a6] {
+.pie .success[data-v-1db5afa3] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-2641a9a6] {
+.pie .progress[data-v-1db5afa3] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-2641a9a6] {
+.pie.complete .progress[data-v-1db5afa3] {
 	display: none;
 }
-.pie.complete .success[data-v-2641a9a6] {
+.pie.complete .success[data-v-1db5afa3] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-2641a9a6]:before {
+.pie.complete[data-v-1db5afa3]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-2641a9a6] {
+.pie.complete[data-v-1db5afa3] {
 	color: var(--bgl-green);
 }
 
@@ -3152,25 +3160,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-.bgl_pill-btn[data-v-d250e8a7]{
+.bgl_pill-btn[data-v-8c7388de]{
 	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-d250e8a7] {
+.loading[data-v-8c7388de] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-d250e8a7 1s linear infinite;
+  animation: spin-8c7388de 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-d250e8a7] {
+.bgl_flatPill .loading[data-v-8c7388de] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-d250e8a7 {
+@keyframes spin-8c7388de {
 0% {
     transform: rotate(0deg);
 }
@@ -3178,11 +3186,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-d250e8a7] {
+.bgl_pill[data-v-8c7388de] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--6c8d2280);
-  color: var(--65372d4a);
+  background-color: var(--4779ddec);
+  color: var(--04aaf136);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3190,26 +3198,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-d250e8a7] {
+.bgl_pill[disabled="true"][data-v-8c7388de] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-d250e8a7] {
+.bgl_pill-flex[data-v-8c7388de] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-d250e8a7] {
+.bgl_pill.bgl_flatPill[data-v-8c7388de] {
   background: transparent;
 }
-.bgl_pill.round[data-v-d250e8a7] {
+.bgl_pill.round[data-v-8c7388de] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-d250e8a7] {
-  outline: 1px solid var(--6c8d2280);
-  color: var(--6c8d2280);
+.bgl_pill-border[data-v-8c7388de] {
+  outline: 1px solid var(--4779ddec);
+  color: var(--4779ddec);
   background: transparent;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.815",
+  "version": "0.0.819",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "devDependencies": {
-    "@types/leaflet": "^1.9.13",
+    "@types/leaflet": "^1.9.14",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^1.1.2",
     "vue": "^3.5.12"
@@ -105,15 +105,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.8.0",
-    "@tiptap/extension-table": "^2.8.0",
-    "@tiptap/extension-table-cell": "^2.8.0",
-    "@tiptap/extension-table-header": "^2.8.0",
-    "@tiptap/extension-table-row": "^2.8.0",
-    "@tiptap/extension-youtube": "^2.8.0",
-    "@tiptap/pm": "^2.8.0",
-    "@tiptap/starter-kit": "^2.8.0",
-    "@tiptap/vue-3": "^2.8.0",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-table": "^2.9.1",
+    "@tiptap/extension-table-cell": "^2.9.1",
+    "@tiptap/extension-table-header": "^2.9.1",
+    "@tiptap/extension-table-row": "^2.9.1",
+    "@tiptap/extension-youtube": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/vue-3": "^2.9.1",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.7",

package/src/components/AccordionItem.vue

@@ -1,11 +1,15 @@
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue'
-import { inject, onMounted, watch } from 'vue'
+import { inject, onMounted, watch, computed } from 'vue'
 
 const props = defineProps<{
 	label?: string
 	id?: string
 	open?: boolean
+	iconType?: 'expand_more' | 'plus_minus'
+	iconPosition?: 'start' | 'end'
+	flat?: boolean
+	iconClass?: string
 }>()
 
 const emit = defineEmits(['update:open'])
@@ -31,6 +35,13 @@ interface AccordionState {
 const accordionState = inject<AccordionState | undefined>('accordionState')
 const id = props.id || Math.random().toString(36).slice(7)
 
+const computedIcon = computed(() => {
+	return props.iconType === 'plus_minus'
+		? (isOpen ? 'remove' : 'add')
+		: 'expand_more'
+})
+const iconPosition = computed(() => props.iconPosition || 'end')
+
 if (accordionState) {
 	watch(
 		() => accordionState.openItem,
@@ -54,19 +65,32 @@ function toggle() {
 </script>
 
 <template>
-	<div class="accordion-item">
+	<div class="accordion-item txt-start" :class="[{ flat }]">
 		<button
 			:aria-expanded="isOpen ? 'true' : 'false'"
 			class="accordion-head"
 			:aria-controls="`accordion-body-${id}`"
 			@click="toggle()"
 		>
+			<span
+				v-if="iconPosition === 'start'"
+				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
+			>
+				<MaterialIcon :icon="computedIcon" />
+			</span>
+
 			<slot name="head">
-				<span class="accordion-label">{{ label }}</span>
+				<span class="accordion-label">
+					{{ label }}
+				</span>
 			</slot>
-			<div class="accordion-icon" :class="{ open: isOpen }">
-				<MaterialIcon icon="expand_more" />
-			</div>
+
+			<span
+				v-if="iconPosition === 'end'"
+				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
+			>
+				<MaterialIcon :icon="computedIcon" />
+			</span>
 		</button>
 		<Transition name="expand">
 			<div
@@ -88,9 +112,8 @@ function toggle() {
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-item button{
+.accordion-item button {
 	cursor: pointer;
-
 }
 
 .accordion-head {
@@ -101,10 +124,17 @@ function toggle() {
 	align-items: center;
 	justify-content: space-between;
 	border: none;
+	color: inherit !important;
 }
 
 .accordion-icon {
 	transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	width: calc( var(--btn-height) / 1.5);
+	height: calc( var(--btn-height) / 1.5);
+	padding-inline: calc(var(--btn-padding) / 3);
 }
 
 .accordion-icon.open {
@@ -115,11 +145,12 @@ function toggle() {
 	font-weight: bold;
 }
 
-.accordion-head:hover .accordion-label {
-	text-decoration: underline;
+.flat.accordion-item {
+	border-bottom: none
 }
 
-.accordion-body {
+.accordion-head:hover .accordion-label {
+	text-decoration: underline;
 }
 </style>
 

package/src/components/Carousel.vue

@@ -53,12 +53,43 @@ function evalHeight() {
 	yHeight = `${height}px`
 }
 
+function scrollEase(target: number, duration: number = 500) {
+	if (!bglSlider) return
+	const start = bglSlider.scrollLeft
+	const change = target - start
+	const startTime = performance.now()
+
+	function animateScroll(currentTime: number) {
+		if (!bglSlider) return
+		const timeElapsed = currentTime - startTime
+		const progress = Math.min(timeElapsed / duration, 1)
+		bglSlider.scrollLeft = start + change * easeInOutQuad(progress)
+		if (progress < 1) {
+			requestAnimationFrame(animateScroll)
+		}
+	}
+
+	function easeInOutQuad(t: number) {
+		return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+	}
+
+	requestAnimationFrame(animateScroll)
+}
+
 function goToSlide(index: number) {
 	if (!bglSlider || index < 0 || index > bglSlider.children.length - 1) return
-	const slider = bglSlider
 	const isRTL = getComputedStyle(bglSlider).direction === 'rtl'
-	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1)
-	slider.scrollTo({ left: scrollX, behavior: 'smooth' })
+	const scrollX = bglSlider.offsetWidth * index * (isRTL ? -1 : 1)
+	const screenWidth = window.innerWidth
+	let duration = 700
+
+	if (screenWidth < 600) {
+		duration = 400
+	} else if (screenWidth < 991) {
+		duration = 500
+	}
+
+	scrollEase(scrollX, duration)
 	activeSlideIndex = index
 	evalHeight()
 }
@@ -67,7 +98,9 @@ watch(() => props.index, goToSlide)
 
 watch(
 	() => activeSlideIndex,
-	(index) => { emit('update:index', index) }
+	() => {
+		if (props.index === activeSlideIndex) return
+		emit('update:index', activeSlideIndex) }
 )
 
 function scrollEnd() {
@@ -153,7 +186,6 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 				allowScroll,
 			}"
 			class="bgl-slider"
-			@scrollend="scrollEnd"
 			@mousedown="startDragging"
 		>
 			<div v-if="isDragging" class="blocker" />
@@ -183,10 +215,10 @@ onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 .bgl-slider {
 	display: grid;
 	position: relative;
-	scroll-behavior: smooth;
+	/* scroll-behavior: smooth; */
 	grid-auto-flow: column;
 	grid-auto-columns: 100%;
-	scroll-snap-type: x mandatory;
+	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }