@bagelink/vue 0.0.827 → 0.0.833

package/dist/index.mjs

@@ -54,7 +54,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$M = ["aria-expanded", "aria-controls"];
 const _hoisted_2$w = { class: "accordion-label" };
-const _hoisted_3$m = ["id", "aria-hidden"];
+const _hoisted_3$n = ["id", "aria-hidden"];
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
@@ -141,7 +141,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               "aria-hidden": unref(isOpen) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_3$m)) : createCommentVNode("", true)
+            ], 8, _hoisted_3$n)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -554,34 +554,23 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$F = {
+const _hoisted_1$F = ["dir"];
+const _hoisted_2$s = {
   key: 0,
   class: "blocker"
 };
-const _hoisted_2$s = { class: "Handlers" };
+const _hoisted_3$m = { class: "Handlers" };
 const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
-    autoHeight: {
-      type: Boolean,
-      default: false
-    },
-    allowScroll: {
-      type: Boolean,
-      default: true
-    },
-    freeDrag: {
-      type: Boolean,
-      default: true
-    },
-    items: {
-      type: Number,
-      default: 4
-    },
-    index: {
-      type: Number,
-      default: 0
-    }
+    autoHeight: { type: Boolean, default: false },
+    allowScroll: { type: Boolean, default: true },
+    freeDrag: { type: Boolean, default: true },
+    items: { type: Number, default: 4 },
+    index: { type: Number, default: 0 },
+    rtl: { type: Boolean, default: false },
+    autoplay: { type: Boolean, default: false },
+    autoPlaySpeed: { type: Number, default: 4e3 }
   },
   emits: ["update:index"],
   setup(__props, { emit: __emit }) {
@@ -589,187 +578,162 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const bglSlider = ref();
     let itemCount = ref(props2.items);
-    let activeSlideIndex = ref(0);
+    let activeSlideIndex = ref(props2.index);
     let isDragging = ref(false);
-    let startX = ref(0);
-    let scrollLeft = ref(0);
     let isPressed = ref(false);
+    let startX = ref(0);
+    let scrollStart = ref(0);
+    let yHeight = ref("auto");
+    let timeout;
+    let autoPlayInterval;
+    function preventDefaultClick(e) {
+      e.preventDefault();
+    }
     function disableDrag() {
       var _a2, _b;
-      (_a2 = bglSlider.value) == null ? void 0 : _a2.querySelectorAll("img").forEach((e) => {
-        e.setAttribute("draggable", "false");
+      (_a2 = bglSlider.value) == null ? void 0 : _a2.querySelectorAll("img").forEach((img) => {
+        img.setAttribute("draggable", "false");
+      });
+      Array.from(((_b = bglSlider.value) == null ? void 0 : _b.children) || []).forEach((child) => {
+        child.setAttribute("draggable", "false");
+        child.addEventListener("click", preventDefaultClick);
       });
-      for (const e of ((_b = bglSlider.value) == null ? void 0 : _b.children) || []) {
-        e.setAttribute("draggable", "false");
-        e.addEventListener("click", (e22) => e22.preventDefault());
-      }
     }
-    let yHeight = ref("auto");
-    function evalHeight() {
+    function updateHeight() {
       if (!props2.autoHeight || !bglSlider.value) return;
-      const slidChildren = bglSlider.value.children[activeSlideIndex.value].children;
-      const height = Array.from(slidChildren).map((el) => el.clientHeight).reduce((a2, b2) => a2 + b2, 0);
-      yHeight.value = `${height}px`;
+      const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
+      const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
+      yHeight.value = `${totalHeight}px`;
     }
-    function scrollEase(target, duration = 500) {
-      if (!bglSlider.value) return;
-      if (isPressed.value) return;
+    function easeScroll(target, duration = 500) {
+      if (!bglSlider.value || isPressed.value) return;
       const start2 = bglSlider.value.scrollLeft;
       const change = target - start2;
       const startTime = performance.now();
-      function animateScroll(currentTime) {
+      function animate(currentTime) {
         if (!bglSlider.value) return;
         const timeElapsed = currentTime - startTime;
         const progress = Math.min(timeElapsed / duration, 1);
         bglSlider.value.scrollLeft = start2 + change * easeInOutQuad(progress);
-        if (progress < 1) {
-          requestAnimationFrame(animateScroll);
-        }
+        if (progress < 1) requestAnimationFrame(animate);
       }
       function easeInOutQuad(t) {
         return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
       }
-      requestAnimationFrame(animateScroll);
+      requestAnimationFrame(animate);
     }
     function goToSlide(index2) {
-      if (!bglSlider.value || index2 < 0 || index2 > bglSlider.value.children.length - 1) return;
-      const isRTL = getComputedStyle(bglSlider.value).direction === "rtl";
-      const scrollX = bglSlider.value.offsetWidth * index2 * (isRTL ? -1 : 1);
-      const screenWidth = window.innerWidth;
-      let duration = 700;
-      if (screenWidth < 600) {
-        duration = 400;
-      } else if (screenWidth < 991) {
-        duration = 500;
-      }
-      scrollEase(scrollX, duration);
+      if (!bglSlider.value || index2 < 0 || index2 >= bglSlider.value.children.length) return;
+      const offset2 = bglSlider.value.offsetWidth * index2 * (props2.rtl ? -1 : 1);
+      const duration = window.innerWidth < 600 ? 400 : window.innerWidth < 991 ? 500 : 700;
+      easeScroll(offset2, duration);
       activeSlideIndex.value = index2;
-      evalHeight();
+      updateHeight();
     }
-    watch(() => props2.index, goToSlide);
-    watch(
-      () => activeSlideIndex.value,
-      () => {
-        if (props2.index === activeSlideIndex.value) return;
-        emit2("update:index", activeSlideIndex.value);
-      }
-    );
-    function goToSlideScrollEnd() {
+    function handleSlideChange() {
+      if (props2.index !== activeSlideIndex.value) emit2("update:index", activeSlideIndex.value);
+    }
+    function handleResize() {
       if (!bglSlider.value) return;
-      const isDragForward = startX.value > bglSlider.value.offsetLeft;
-      if (itemCount.value === 1) {
-        if (isDragForward) activeSlideIndex.value = Math.ceil(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
-        else activeSlideIndex.value = Math.floor(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
-      } else {
-        activeSlideIndex.value = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
-      }
-      startX.value = 0;
-      const nextSlide = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
-      goToSlide(nextSlide);
+      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : Math.min(props2.items, 3);
+      goToSlide(activeSlideIndex.value);
     }
-    let timeout = null;
-    function scrollEnd() {
+    function onScrollEnd() {
+      if (!props2.freeDrag && !props2.allowScroll || !bglSlider.value) return;
+      if (autoPlayInterval) clearInterval(autoPlayInterval);
       if (timeout) clearTimeout(timeout);
-      timeout = setTimeout(goToSlideScrollEnd, 400);
+      timeout = setTimeout(() => {
+        finalizeScroll();
+      }, 400);
     }
-    function stopDragging(e) {
-      isPressed.value = false;
-      document.removeEventListener("mousemove", move);
-      document.removeEventListener("mouseup", stopDragging);
-      document.removeEventListener("dragend", stopDragging);
-      setTimeout(() => isDragging.value = false, 100);
-    }
-    function move(e) {
+    function finalizeScroll() {
       if (!bglSlider.value) return;
-      const x2 = e.pageX - bglSlider.value.offsetLeft;
-      const walk = x2 - startX.value;
-      if (walk > 20 || walk < -20) isDragging.value = true;
-      if (!isDragging.value) return;
-      const scroll = x2 - startX.value;
-      bglSlider.value.scrollLeft = scrollLeft.value - scroll;
+      if (props2.autoplay) autoPlayInterval = setInterval(next, props2.autoPlaySpeed);
+      scrollStart.value = props2.rtl ? -bglSlider.value.scrollLeft : bglSlider.value.scrollLeft;
+      activeSlideIndex.value = Math.round(scrollStart.value / bglSlider.value.offsetWidth);
+      goToSlide(activeSlideIndex.value);
     }
-    function startDragging(e) {
+    function startDrag(e) {
       if (e.button !== 0 || !props2.freeDrag || !bglSlider.value) return;
+      if (autoPlayInterval) clearInterval(autoPlayInterval);
       startX.value = e.pageX - bglSlider.value.offsetLeft;
-      scrollLeft.value = bglSlider.value.scrollLeft;
+      scrollStart.value = bglSlider.value.scrollLeft;
       isPressed.value = true;
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", stopDragging);
+      document.addEventListener("mousemove", onDrag);
+      document.addEventListener("mouseup", endDrag);
+    }
+    function onDrag(e) {
+      if (!bglSlider.value) return;
+      const x2 = e.pageX - bglSlider.value.offsetLeft;
+      const distance = x2 - startX.value;
+      if (Math.abs(distance) > 20) isDragging.value = true;
+      if (isDragging.value) bglSlider.value.scrollLeft = scrollStart.value - distance;
+    }
+    function endDrag() {
+      isPressed.value = false;
+      document.removeEventListener("mousemove", onDrag);
+      document.removeEventListener("mouseup", endDrag);
+      setTimeout(() => isDragging.value = false, 100);
     }
     function next() {
       if (!bglSlider.value) return;
       const slideCount = bglSlider.value.children.length;
-      const isLastSlide = activeSlideIndex.value >= slideCount - 1;
-      if (isLastSlide) goToSlide(0);
-      else goToSlide(activeSlideIndex.value + 1);
+      goToSlide((activeSlideIndex.value + 1) % slideCount);
     }
     function prev() {
       if (!bglSlider.value) return;
       const slideCount = bglSlider.value.children.length;
-      if (activeSlideIndex.value === 0) goToSlide(slideCount - 1);
-      else goToSlide(activeSlideIndex.value - 1);
-    }
-    function evalWidth() {
-      if (!bglSlider.value) return;
-      if (window.innerWidth < 600) itemCount.value = 1;
-      else if (window.innerWidth < 991) itemCount.value = Math.min(props2.items, 2);
-      else if (window.innerWidth < 1280) itemCount.value = Math.min(props2.items, 3);
-      else itemCount.value = props2.items;
-      console.log(itemCount.value, window.innerWidth);
-      goToSlide(activeSlideIndex.value);
+      goToSlide((activeSlideIndex.value - 1 + slideCount) % slideCount);
     }
     onMounted(() => {
-      window.addEventListener("resize", evalWidth);
-      evalHeight();
-      evalWidth();
+      window.addEventListener("resize", handleResize);
       disableDrag();
+      updateHeight();
+      handleResize();
+      if (props2.autoplay) {
+        autoPlayInterval = setInterval(next, props2.autoPlaySpeed);
+      }
     });
+    function clearAutoplay() {
+      if (autoPlayInterval) clearInterval(autoPlayInterval);
+    }
     onUnmounted(() => {
-      window.removeEventListener("resize", evalWidth);
+      window.removeEventListener("resize", handleResize);
     });
+    watch(() => props2.index, goToSlide);
+    watch(() => activeSlideIndex.value, handleSlideChange);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["BglCarousel", { autoHeight: __props.autoHeight }]),
-        style: normalizeStyle({ height: unref(yHeight) })
+        style: normalizeStyle({ height: unref(yHeight) }),
+        dir: __props.rtl ? "rtl" : "ltr"
       }, [
         createElementVNode("div", {
           ref_key: "bglSlider",
           ref: bglSlider,
-          class: normalizeClass([{
-            dragging: unref(isDragging),
-            clicking: unref(isPressed),
-            allowScroll: __props.allowScroll,
-            odd: unref(itemCount) % 2 !== 0,
-            [`slides-${unref(itemCount)}`]: unref(itemCount) === 1
-          }, "bgl-slider"]),
-          style: normalizeStyle({
-            "--item-count": unref(itemCount)
-          }),
-          onScroll: scrollEnd,
-          onMousedown: startDragging
+          class: normalizeClass(["bgl-slider", { dragging: unref(isDragging), clicking: unref(isPressed), allowScroll: __props.allowScroll, odd: unref(itemCount) % 2 !== 0, [`slides-${unref(itemCount)}`]: unref(itemCount) === 1 }]),
+          style: normalizeStyle({ "--item-count": unref(itemCount) }),
+          onScroll: onScrollEnd,
+          onMousedown: startDrag,
+          onMouseover: clearAutoplay,
+          onFocusin: clearAutoplay
         }, [
-          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$F)) : createCommentVNode("", true),
+          unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_2$s)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ], 38),
-        createElementVNode("div", _hoisted_2$s, [
+        createElementVNode("div", _hoisted_3$m, [
           createElementVNode("span", { onClick: prev }, [
-            renderSlot(_ctx.$slots, "prev", {
-              prev,
-              index: unref(activeSlideIndex)
-            }, void 0, true)
+            renderSlot(_ctx.$slots, "prev", { index: unref(activeSlideIndex) }, void 0, true)
           ]),
           createElementVNode("span", { onClick: next }, [
-            renderSlot(_ctx.$slots, "next", {
-              next,
-              index: unref(activeSlideIndex)
-            }, void 0, true)
+            renderSlot(_ctx.$slots, "next", { index: unref(activeSlideIndex) }, void 0, true)
           ])
         ])
-      ], 6);
+      ], 14, _hoisted_1$F);
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-e588f5a7"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-3f8e6ea0"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -53653,8 +53617,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "64b28dae": computedBackgroundColor.value,
-      "e70b1a78": cumputedTextColor.value
+      "559533ce": computedBackgroundColor.value,
+      "4621e5ae": cumputedTextColor.value
     }));
     const props2 = __props;
     const slots = useSlots();
@@ -53745,7 +53709,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-40a0a2e2"]]);
+const Pill = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-4c9e6928"]]);
 const _sfc_main$5 = {};
 function _sfc_render$1(_ctx, _cache) {
   const _component_router_view = resolveComponent("router-view");

package/dist/style.css

@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-e588f5a7] {
+.blocker[data-v-3f8e6ea0] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-e588f5a7] {
+.bgl-slider[data-v-3f8e6ea0] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,43 +367,43 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-e588f5a7] {
+.autoHeight[data-v-3f8e6ea0] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-e588f5a7] {
+.bgl-slider.allowScroll[data-v-3f8e6ea0] {
 	overflow-x: scroll;
 }
-.bgl-slider[data-v-e588f5a7] {
+.bgl-slider[data-v-3f8e6ea0] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.odd[data-v-e588f5a7] {
+.bgl-slider.odd[data-v-3f8e6ea0] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-1[data-v-e588f5a7] {
+.bgl-slider.slides-1[data-v-3f8e6ea0] {
 	grid-auto-columns: 100%;
 	gap: 0;
 }
-.bgl-slider[data-v-e588f5a7]::-webkit-scrollbar {
+.bgl-slider[data-v-3f8e6ea0]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-e588f5a7] * {
+.bgl-slider[data-v-3f8e6ea0] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-e588f5a7] {
+.dragging.bgl-slider[data-v-3f8e6ea0] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-e588f5a7] {
+.clicking.bgl-slider[data-v-3f8e6ea0] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-e588f5a7] * {
+.dragging.bgl-slider[data-v-3f8e6ea0] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-1[data-v-e588f5a7]  * {
+.bgl-slider.slides-1[data-v-3f8e6ea0]  * {
 		margin-inline-start: 1%;
 }
 }
@@ -3174,25 +3174,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-.bgl_pill-btn[data-v-40a0a2e2]{
+.bgl_pill-btn[data-v-4c9e6928]{
 	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-40a0a2e2] {
+.loading[data-v-4c9e6928] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-40a0a2e2 1s linear infinite;
+  animation: spin-4c9e6928 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-40a0a2e2] {
+.bgl_flatPill .loading[data-v-4c9e6928] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-40a0a2e2 {
+@keyframes spin-4c9e6928 {
 0% {
     transform: rotate(0deg);
 }
@@ -3200,11 +3200,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-40a0a2e2] {
+.bgl_pill[data-v-4c9e6928] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--64b28dae);
-  color: var(--e70b1a78);
+  background-color: var(--559533ce);
+  color: var(--4621e5ae);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3212,26 +3212,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-40a0a2e2] {
+.bgl_pill[disabled="true"][data-v-4c9e6928] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-40a0a2e2] {
+.bgl_pill-flex[data-v-4c9e6928] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-40a0a2e2] {
+.bgl_pill.bgl_flatPill[data-v-4c9e6928] {
   background: transparent;
 }
-.bgl_pill.round[data-v-40a0a2e2] {
+.bgl_pill.round[data-v-4c9e6928] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-40a0a2e2] {
-  outline: 1px solid var(--64b28dae);
-  color: var(--64b28dae);
+.bgl_pill-border[data-v-4c9e6928] {
+  outline: 1px solid var(--559533ce);
+  color: var(--559533ce);
   background: transparent;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.827",
+  "version": "0.0.833",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.14",
     "@types/signature_pad": "^2.3.6",
-    "@vue-macros/reactivity-transform": "^1.1.2",
+    "@vue-macros/reactivity-transform": "^1.1.3",
     "vue": "^3.5.12"
   },
   "peerDependencies": {
@@ -115,7 +115,7 @@
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/vue-3": "^2.9.1",
     "@vuepic/vue-datepicker": "^8.8.1",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.11.12",