@bagelink/vue 0.0.522 → 0.0.526

package/dist/components/Carousel.vue.d.ts

@@ -3,12 +3,12 @@ declare function prev(): void;
 declare function __VLS_template(): {
     default?(_: {}): any;
     prev?(_: {
-        index: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<number>;
         prev: typeof prev;
+        index: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<number>;
     }): any;
     next?(_: {
-        index: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<number>;
         next: typeof next;
+        index: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<number>;
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<{
@@ -32,18 +32,6 @@ declare const __VLS_component: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    autoplay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoplaySpeed: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loop: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:index": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -67,29 +55,14 @@ declare const __VLS_component: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    autoplay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoplaySpeed: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loop: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     "onUpdate:index"?: ((...args: any[]) => any) | undefined;
 }, {
-    autoplay: boolean;
-    loop: boolean;
     autoHeight: boolean;
     allowScroll: boolean;
     freeDrag: boolean;
     items: number;
     index: number;
-    autoplaySpeed: number;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/components/Carousel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.vue"],"names":[],"mappings":"AA2GA,iBAAS,IAAI,SAIZ;AAED,iBAAS,IAAI,SAIZ;AAiDD,iBAAS,cAAc;qBAsKO,GAAG;;;;QACN,GAAG;;;;QACH,GAAG;EAK7B;AA6BD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.vue"],"names":[],"mappings":"AAsHA,iBAAS,IAAI,SAMZ;AAED,iBAAS,IAAI,SAKZ;AAkBD,iBAAS,cAAc;qBAwKO,GAAG;;;;QACN,GAAG;;;;QACH,GAAG;EAK7B;AAuCD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -6524,28 +6524,37 @@ const _hoisted_2$n = { class: "Handlers" };
 const _sfc_main$s = /* @__PURE__ */ vue.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 },
-    autoplay: { type: Boolean, default: false },
-    autoplaySpeed: { type: Number, default: 3e3 },
-    loop: { type: Boolean, default: false }
+    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
+    }
   },
   emits: ["update:index"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const bglSlider = vue.ref(null);
+    const bglSlider = vue.ref();
     let activeSlideIndex = vue.ref(0);
     let isDragging = vue.ref(false);
     let startX = vue.ref(0);
     let scrollLeft = vue.ref(0);
     let isPressed = vue.ref(false);
-    let yHeight = vue.ref("auto");
-    let autoplayInterval = vue.ref(null);
-    let originalSlideCount = vue.ref(0);
     function disableDrag() {
       var _a2, _b;
       (_a2 = bglSlider.value) == null ? void 0 : _a2.querySelectorAll("img").forEach((e) => {
@@ -6553,40 +6562,36 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
       });
       for (const e of ((_b = bglSlider.value) == null ? void 0 : _b.children) || []) {
         e.setAttribute("draggable", "false");
-        e.addEventListener("click", (el) => el.preventDefault());
+        e.addEventListener("click", (e22) => e22.preventDefault());
       }
     }
+    let yHeight = vue.ref("auto");
     function evalHeight() {
       if (!props2.autoHeight || !bglSlider.value) return;
-      const height = Array.from(bglSlider.value.children[activeSlideIndex.value].children).map((el) => el.clientHeight).reduce((a2, b2) => a2 + b2, 0);
+      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`;
     }
-    function goToSlide(index2, behavior = "smooth") {
-      if (!bglSlider.value) return;
-      if (props2.loop) {
-        if (index2 >= originalSlideCount.value) {
-          index2 = index2 % originalSlideCount.value;
-          behavior = "auto";
-        } else if (index2 < 0) {
-          index2 = originalSlideCount.value - -index2 % originalSlideCount.value;
-          behavior = "auto";
-        }
-      }
+    function goToSlide(index2) {
+      if (!bglSlider.value || index2 < 0 || index2 > bglSlider.value.children.length - 1) return;
+      const slider = bglSlider.value;
       const isRTL = getComputedStyle(bglSlider.value).direction === "rtl";
-      const scrollX = bglSlider.value.offsetWidth * index2 * (isRTL ? -1 : 1);
-      bglSlider.value.scrollTo({ left: scrollX, behavior });
+      const scrollX = slider.offsetWidth * index2 * (isRTL ? -1 : 1);
+      slider.scrollTo({ left: scrollX, behavior: "smooth" });
       activeSlideIndex.value = index2;
       evalHeight();
     }
-    vue.watch(() => props2.index, (index2) => {
-      goToSlide(index2);
-    });
-    vue.watch(() => activeSlideIndex.value, (index2) => {
-      emit2("update:index", index2);
-    });
+    vue.watch(() => props2.index, goToSlide);
+    vue.watch(
+      () => activeSlideIndex.value,
+      (index2) => {
+        emit2("update:index", index2);
+      }
+    );
     function scrollEnd() {
-      if (props2.items !== 1 || !bglSlider.value) return;
-      const nextSlide = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      const slider = bglSlider.value;
+      if (!slider || props2.items !== 1) return;
+      const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
       goToSlide(nextSlide);
     }
     function stopDragging(e) {
@@ -6594,8 +6599,11 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
       const slider = bglSlider.value;
       if (!slider) return;
       const isDragForward = startX.value > e.pageX + slider.offsetLeft;
-      activeSlideIndex.value = isDragForward ? Math.ceil(slider.scrollLeft / slider.offsetWidth) : Math.floor(slider.scrollLeft / slider.offsetWidth);
+      if (isDragForward)
+        activeSlideIndex.value = Math.ceil(slider.scrollLeft / slider.offsetWidth);
+      else activeSlideIndex.value = Math.floor(slider.scrollLeft / slider.offsetWidth);
       if (props2.items === 1) goToSlide(activeSlideIndex.value);
+      startX.value = 0;
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", stopDragging);
       document.removeEventListener("dragend", stopDragging);
@@ -6604,9 +6612,11 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     function move(e) {
       if (!bglSlider.value) return;
       const x2 = e.pageX - bglSlider.value.offsetLeft;
-      if (Math.abs(x2 - startX.value) > 20) isDragging.value = true;
+      const walk = x2 - startX.value;
+      if (walk > 20 || walk < -20) isDragging.value = true;
       if (!isDragging.value) return;
-      bglSlider.value.scrollLeft = scrollLeft.value - (x2 - startX.value);
+      const scroll = x2 - startX.value;
+      bglSlider.value.scrollLeft = scrollLeft.value - scroll;
     }
     function startDragging(e) {
       if (e.button !== 0 || !props2.freeDrag || !bglSlider.value) return;
@@ -6618,70 +6628,46 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
       document.addEventListener("dragend", stopDragging);
     }
     function next() {
-      if (bglSlider.value) {
-        goToSlide(activeSlideIndex.value + 1);
-      }
+      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);
     }
     function prev() {
-      if (bglSlider.value) {
-        goToSlide(activeSlideIndex.value - 1);
-      }
+      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) goToSlide(activeSlideIndex.value);
-    }
-    function startAutoplay() {
-      if (props2.autoplay) {
-        autoplayInterval.value = setInterval(next, props2.autoplaySpeed);
-      }
-    }
-    function stopAutoplay() {
-      if (autoplayInterval.value) {
-        clearInterval(autoplayInterval.value);
-        autoplayInterval.value = null;
-      }
-    }
-    function cloneSlides() {
-      if (!bglSlider.value || !props2.loop) return;
-      const slides = Array.from(bglSlider.value.children);
-      originalSlideCount.value = slides.length;
-      slides.forEach((slide) => {
-        const clone2 = slide.cloneNode(true);
-        bglSlider.value.appendChild(clone2);
-      });
-      slides.forEach((slide) => {
-        const clone2 = slide.cloneNode(true);
-        bglSlider.value.insertBefore(clone2, bglSlider.value.firstChild);
-      });
+      if (!bglSlider.value) return;
+      goToSlide(activeSlideIndex.value);
     }
     vue.onMounted(() => {
-      cloneSlides();
       window.addEventListener("resize", evalWidth);
       evalHeight();
       disableDrag();
-      startAutoplay();
     });
     vue.onUnmounted(() => {
       window.removeEventListener("resize", evalWidth);
-      stopAutoplay();
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["BglCarousel", { autoHeight: props2.autoHeight }]),
+        class: vue.normalizeClass(["BglCarousel", { autoHeight: __props.autoHeight }]),
         style: vue.normalizeStyle({ height: vue.unref(yHeight) })
       }, [
         vue.createElementVNode("div", {
           ref_key: "bglSlider",
           ref: bglSlider,
-          class: vue.normalizeClass(["bgl-slider", [
-            { dragging: vue.unref(isDragging), clicking: vue.unref(isPressed), [`slides-${props2.items}`]: true, allowScroll: props2.allowScroll }
-          ]]),
+          class: vue.normalizeClass([{
+            dragging: vue.unref(isDragging),
+            clicking: vue.unref(isPressed),
+            [`slides-${__props.items}`]: true,
+            allowScroll: __props.allowScroll
+          }, "bgl-slider"]),
           onScrollend: scrollEnd,
-          onMousedown: startDragging,
-          onMouseenter: stopAutoplay,
-          onMouseleave: startAutoplay,
-          onFocusin: stopAutoplay,
-          onFocusout: startAutoplay
+          onMousedown: startDragging
         }, [
           vue.unref(isDragging) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t)) : vue.createCommentVNode("", true),
           vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -6689,14 +6675,14 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2$n, [
           vue.createElementVNode("span", { onClick: prev }, [
             vue.renderSlot(_ctx.$slots, "prev", {
-              index: vue.unref(activeSlideIndex),
-              prev
+              prev,
+              index: vue.unref(activeSlideIndex)
             }, void 0, true)
           ]),
           vue.createElementVNode("span", { onClick: next }, [
             vue.renderSlot(_ctx.$slots, "next", {
-              index: vue.unref(activeSlideIndex),
-              next
+              next,
+              index: vue.unref(activeSlideIndex)
             }, void 0, true)
           ])
         ])
@@ -6704,7 +6690,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-f21373a1"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-1f9c6644"]]);
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "ModalConfirm",
   props: {

package/dist/index.mjs

@@ -6522,28 +6522,37 @@ const _hoisted_2$n = { class: "Handlers" };
 const _sfc_main$s = /* @__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 },
-    autoplay: { type: Boolean, default: false },
-    autoplaySpeed: { type: Number, default: 3e3 },
-    loop: { type: Boolean, default: false }
+    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
+    }
   },
   emits: ["update:index"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
-    const bglSlider = ref(null);
+    const bglSlider = ref();
     let activeSlideIndex = ref(0);
     let isDragging = ref(false);
     let startX = ref(0);
     let scrollLeft = ref(0);
     let isPressed = ref(false);
-    let yHeight = ref("auto");
-    let autoplayInterval = ref(null);
-    let originalSlideCount = ref(0);
     function disableDrag() {
       var _a2, _b;
       (_a2 = bglSlider.value) == null ? void 0 : _a2.querySelectorAll("img").forEach((e) => {
@@ -6551,40 +6560,36 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       });
       for (const e of ((_b = bglSlider.value) == null ? void 0 : _b.children) || []) {
         e.setAttribute("draggable", "false");
-        e.addEventListener("click", (el) => el.preventDefault());
+        e.addEventListener("click", (e22) => e22.preventDefault());
       }
     }
+    let yHeight = ref("auto");
     function evalHeight() {
       if (!props2.autoHeight || !bglSlider.value) return;
-      const height = Array.from(bglSlider.value.children[activeSlideIndex.value].children).map((el) => el.clientHeight).reduce((a2, b2) => a2 + b2, 0);
+      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`;
     }
-    function goToSlide(index2, behavior = "smooth") {
-      if (!bglSlider.value) return;
-      if (props2.loop) {
-        if (index2 >= originalSlideCount.value) {
-          index2 = index2 % originalSlideCount.value;
-          behavior = "auto";
-        } else if (index2 < 0) {
-          index2 = originalSlideCount.value - -index2 % originalSlideCount.value;
-          behavior = "auto";
-        }
-      }
+    function goToSlide(index2) {
+      if (!bglSlider.value || index2 < 0 || index2 > bglSlider.value.children.length - 1) return;
+      const slider = bglSlider.value;
       const isRTL = getComputedStyle(bglSlider.value).direction === "rtl";
-      const scrollX = bglSlider.value.offsetWidth * index2 * (isRTL ? -1 : 1);
-      bglSlider.value.scrollTo({ left: scrollX, behavior });
+      const scrollX = slider.offsetWidth * index2 * (isRTL ? -1 : 1);
+      slider.scrollTo({ left: scrollX, behavior: "smooth" });
       activeSlideIndex.value = index2;
       evalHeight();
     }
-    watch(() => props2.index, (index2) => {
-      goToSlide(index2);
-    });
-    watch(() => activeSlideIndex.value, (index2) => {
-      emit2("update:index", index2);
-    });
+    watch(() => props2.index, goToSlide);
+    watch(
+      () => activeSlideIndex.value,
+      (index2) => {
+        emit2("update:index", index2);
+      }
+    );
     function scrollEnd() {
-      if (props2.items !== 1 || !bglSlider.value) return;
-      const nextSlide = Math.round(bglSlider.value.scrollLeft / bglSlider.value.offsetWidth);
+      const slider = bglSlider.value;
+      if (!slider || props2.items !== 1) return;
+      const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth);
       goToSlide(nextSlide);
     }
     function stopDragging(e) {
@@ -6592,8 +6597,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       const slider = bglSlider.value;
       if (!slider) return;
       const isDragForward = startX.value > e.pageX + slider.offsetLeft;
-      activeSlideIndex.value = isDragForward ? Math.ceil(slider.scrollLeft / slider.offsetWidth) : Math.floor(slider.scrollLeft / slider.offsetWidth);
+      if (isDragForward)
+        activeSlideIndex.value = Math.ceil(slider.scrollLeft / slider.offsetWidth);
+      else activeSlideIndex.value = Math.floor(slider.scrollLeft / slider.offsetWidth);
       if (props2.items === 1) goToSlide(activeSlideIndex.value);
+      startX.value = 0;
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", stopDragging);
       document.removeEventListener("dragend", stopDragging);
@@ -6602,9 +6610,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     function move(e) {
       if (!bglSlider.value) return;
       const x2 = e.pageX - bglSlider.value.offsetLeft;
-      if (Math.abs(x2 - startX.value) > 20) isDragging.value = true;
+      const walk = x2 - startX.value;
+      if (walk > 20 || walk < -20) isDragging.value = true;
       if (!isDragging.value) return;
-      bglSlider.value.scrollLeft = scrollLeft.value - (x2 - startX.value);
+      const scroll = x2 - startX.value;
+      bglSlider.value.scrollLeft = scrollLeft.value - scroll;
     }
     function startDragging(e) {
       if (e.button !== 0 || !props2.freeDrag || !bglSlider.value) return;
@@ -6616,70 +6626,46 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       document.addEventListener("dragend", stopDragging);
     }
     function next() {
-      if (bglSlider.value) {
-        goToSlide(activeSlideIndex.value + 1);
-      }
+      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);
     }
     function prev() {
-      if (bglSlider.value) {
-        goToSlide(activeSlideIndex.value - 1);
-      }
+      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) goToSlide(activeSlideIndex.value);
-    }
-    function startAutoplay() {
-      if (props2.autoplay) {
-        autoplayInterval.value = setInterval(next, props2.autoplaySpeed);
-      }
-    }
-    function stopAutoplay() {
-      if (autoplayInterval.value) {
-        clearInterval(autoplayInterval.value);
-        autoplayInterval.value = null;
-      }
-    }
-    function cloneSlides() {
-      if (!bglSlider.value || !props2.loop) return;
-      const slides = Array.from(bglSlider.value.children);
-      originalSlideCount.value = slides.length;
-      slides.forEach((slide) => {
-        const clone2 = slide.cloneNode(true);
-        bglSlider.value.appendChild(clone2);
-      });
-      slides.forEach((slide) => {
-        const clone2 = slide.cloneNode(true);
-        bglSlider.value.insertBefore(clone2, bglSlider.value.firstChild);
-      });
+      if (!bglSlider.value) return;
+      goToSlide(activeSlideIndex.value);
     }
     onMounted(() => {
-      cloneSlides();
       window.addEventListener("resize", evalWidth);
       evalHeight();
       disableDrag();
-      startAutoplay();
     });
     onUnmounted(() => {
       window.removeEventListener("resize", evalWidth);
-      stopAutoplay();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["BglCarousel", { autoHeight: props2.autoHeight }]),
+        class: normalizeClass(["BglCarousel", { autoHeight: __props.autoHeight }]),
         style: normalizeStyle({ height: unref(yHeight) })
       }, [
         createElementVNode("div", {
           ref_key: "bglSlider",
           ref: bglSlider,
-          class: normalizeClass(["bgl-slider", [
-            { dragging: unref(isDragging), clicking: unref(isPressed), [`slides-${props2.items}`]: true, allowScroll: props2.allowScroll }
-          ]]),
+          class: normalizeClass([{
+            dragging: unref(isDragging),
+            clicking: unref(isPressed),
+            [`slides-${__props.items}`]: true,
+            allowScroll: __props.allowScroll
+          }, "bgl-slider"]),
           onScrollend: scrollEnd,
-          onMousedown: startDragging,
-          onMouseenter: stopAutoplay,
-          onMouseleave: startAutoplay,
-          onFocusin: stopAutoplay,
-          onFocusout: startAutoplay
+          onMousedown: startDragging
         }, [
           unref(isDragging) ? (openBlock(), createElementBlock("div", _hoisted_1$t)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -6687,14 +6673,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$n, [
           createElementVNode("span", { onClick: prev }, [
             renderSlot(_ctx.$slots, "prev", {
-              index: unref(activeSlideIndex),
-              prev
+              prev,
+              index: unref(activeSlideIndex)
             }, void 0, true)
           ]),
           createElementVNode("span", { onClick: next }, [
             renderSlot(_ctx.$slots, "next", {
-              index: unref(activeSlideIndex),
-              next
+              next,
+              index: unref(activeSlideIndex)
             }, void 0, true)
           ])
         ])
@@ -6702,7 +6688,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-f21373a1"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-1f9c6644"]]);
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "ModalConfirm",
   props: {

package/dist/style.css

@@ -934,83 +934,83 @@ display: block;
 	border-radius: var(--input-border-radius);
 }
 
-.blocker[data-v-f21373a1] {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
+.blocker[data-v-1f9c6644] {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
 }
-.bgl-slider[data-v-f21373a1] {
-  display: grid;
-  position: relative;
-  scroll-behavior: smooth;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  scroll-snap-type: x mandatory;
-  overflow-x: hidden;
+.bgl-slider[data-v-1f9c6644] {
+	display: grid;
+	position: relative;
+	scroll-behavior: smooth;
+	grid-auto-flow: column;
+	grid-auto-columns: 100%;
+	scroll-snap-type: x mandatory;
+	overflow-x: hidden;
 }
-.autoHeight[data-v-f21373a1] {
-  transition: height ease 0.7s;
+.autoHeight[data-v-1f9c6644] {
+	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-f21373a1] {
-  overflow-x: scroll;
+.bgl-slider.allowScroll[data-v-1f9c6644] {
+	overflow-x: scroll;
 }
-.bgl-slider.slides-6[data-v-f21373a1] {
-  grid-auto-columns: 15.9%;
-  gap: 1%;
+.bgl-slider.slides-6[data-v-1f9c6644] {
+	grid-auto-columns: 15.9%;
+	gap: 1%;
 }
-.bgl-slider.slides-5[data-v-f21373a1] {
-  grid-auto-columns: 19.3%;
-  gap: 1%;
+.bgl-slider.slides-5[data-v-1f9c6644] {
+	grid-auto-columns: 19.3%;
+	gap: 1%;
 }
-.bgl-slider.slides-4[data-v-f21373a1] {
-  grid-auto-columns: 25%;
-  gap: 1%;
+.bgl-slider.slides-4[data-v-1f9c6644] {
+	grid-auto-columns: 24.3%;
+	gap: 1%;
 }
-.bgl-slider.slides-3[data-v-f21373a1] {
-  grid-auto-columns: 33%;
-  gap: 1%;
+.bgl-slider.slides-3[data-v-1f9c6644] {
+	grid-auto-columns: 33%;
+	gap: 1%;
 }
-.bgl-slider.slides-2[data-v-f21373a1] {
-  grid-auto-columns: 50%;
-  gap: 1%;
+.bgl-slider.slides-2[data-v-1f9c6644] {
+	grid-auto-columns: 50%;
+	gap: 1%;
 }
-.bgl-slider.slides-1[data-v-f21373a1] {
-  grid-auto-columns: 100%;
+.bgl-slider.slides-1[data-v-1f9c6644] {
+	grid-auto-columns: 100%;
 }
-.bgl-slider[data-v-f21373a1]::-webkit-scrollbar {
-  display: none;
+.bgl-slider[data-v-1f9c6644]::-webkit-scrollbar {
+	display: none;
 }
-.bgl-slider[data-v-f21373a1] * {
-  scroll-snap-align: center;
+.bgl-slider[data-v-1f9c6644] * {
+	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-f21373a1] {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-  scroll-snap-type: unset;
+.dragging.bgl-slider[data-v-1f9c6644] {
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-f21373a1] {
-  scroll-behavior: unset;
+.clicking.bgl-slider[data-v-1f9c6644] {
+	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-f21373a1] * {
-  scroll-snap-align: unset;
-  user-select: none;
+.dragging.bgl-slider[data-v-1f9c6644] * {
+	scroll-snap-align: unset;
+	user-select: none;
 }
 @media screen and (max-width: 1280px) {
-.bgl-slider.slides-4[data-v-f21373a1] {
-    grid-auto-columns: 33%;
+.bgl-slider.slides-4[data-v-1f9c6644] {
+		grid-auto-columns: 33%;
 }
 }
 @media screen and (max-width: 991px) {
-.bgl-slider.slides-4[data-v-f21373a1] {
-    grid-auto-columns: 50%;
+.bgl-slider.slides-4[data-v-1f9c6644] {
+		grid-auto-columns: 50%;
 }
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-4[data-v-f21373a1] {
-    grid-auto-columns: 100%;
+.bgl-slider.slides-4[data-v-1f9c6644] {
+		grid-auto-columns: 100%;
 }
 }
 /* required styles */
@@ -1791,6 +1791,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .dp__calendar_row>div:last-child {
 	pointer-events: auto !important;
 }
+.dp__time_input {
+	direction: ltr;
+}
 
 .bagel-input textarea[data-v-1cbaeab2] {
 	font-family: monospace;
@@ -2952,7 +2955,8 @@ p {
     min-height: 100%;
 }
 .w-100,
-.width-100 {
+.w-100p,
+.w100p .width-100 {
     width: 100%;
 }
 .w300,
@@ -3125,6 +3129,36 @@ p {
 .w1600 {
     max-width: 1600px;
 }
+.vw10 {
+    width: 10vw;
+}
+.vw20 {
+    width: 20vw;
+}
+.vw30 {
+    width: 30vw;
+}
+.vw40 {
+    width: 40vw;
+}
+.vw50 {
+    width: 50vw;
+}
+.vw60 {
+    width: 60vw;
+}
+.vw70 {
+    width: 70vw;
+}
+.vw80 {
+    width: 80vw;
+}
+.vw90 {
+    width: 90vw;
+}
+.vw100 {
+    width: 100vw;
+}
 .w-all,
 .wall {
     width: -webkit-fill-available;
@@ -4434,10 +4468,12 @@ p {
     }
 
     .m_w-100,
-    .m_width-100 {
+    .m_w100p,
+    .m_w100p .m_width-100 {
         width: 100% !important;
     }
 
+
     .m_w300,
     .m_w350,
     .m_w400,
@@ -4565,6 +4601,47 @@ p {
         max-width: 850px;
     }
 
+    .m_vw10 {
+        width: 10vw;
+    }
+
+    .m_vw20 {
+        width: 20vw;
+    }
+
+    .m_vw30 {
+        width: 30vw;
+    }
+
+    .m_vw40 {
+        width: 40vw;
+    }
+
+    .m_vw50 {
+        width: 50vw;
+    }
+
+    .m_vw60 {
+        width: 60vw;
+    }
+
+    .m_vw70 {
+        width: 70vw;
+    }
+
+    .m_vw80 {
+        width: 80vw;
+    }
+
+    .m_vw90 {
+        width: 90vw;
+    }
+
+    .m_vw100 {
+        width: 100vw;
+    }
+
+
     .m_w-all,
     .m_wall {
         width: -webkit-fill-available;

package/package.json

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

package/src/components/Carousel.vue

@@ -2,70 +2,78 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
-	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 },
-	autoplay: { type: Boolean, default: false },
-	autoplaySpeed: { type: Number, default: 3000 },
-	loop: { type: Boolean, default: false },
+	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,
+	},
 })
-
 const emit = defineEmits(['update:index'])
-
-const bglSlider = $ref<HTMLElement | null>(null)
+const bglSlider = $ref<HTMLElement>()
 let activeSlideIndex = $ref(0)
 let isDragging = $ref(false)
 let startX = $ref(0)
 let scrollLeft = $ref(0)
 let isPressed = $ref(false)
-let yHeight = $ref('auto')
-let autoplayInterval = $ref<ReturnType<typeof setInterval> | null>(null)
-let originalSlideCount = $ref(0)
 
 function disableDrag() {
-	bglSlider?.querySelectorAll('img').forEach((e) => { e.setAttribute('draggable', 'false') })
+	bglSlider
+		?.querySelectorAll('img')
+		.forEach((e) => { e.setAttribute('draggable', 'false') })
+
 	for (const e of (bglSlider?.children as any[] | undefined) || []) {
 		e.setAttribute('draggable', 'false')
-		e.addEventListener('click', (el: any) => el.preventDefault())
+		e.addEventListener('click', (e: any) => e.preventDefault())
 	}
 }
 
+let yHeight = $ref('auto')
 function evalHeight() {
 	if (!props.autoHeight || !bglSlider) return
-	const height = Array.from(bglSlider.children[activeSlideIndex].children)
+	const slidChildren = bglSlider.children[activeSlideIndex].children
+	const height = Array.from(slidChildren)
 		.map(el => el.clientHeight)
 		.reduce((a, b) => a + b, 0)
+
 	yHeight = `${height}px`
 }
 
-function goToSlide(index: number, behavior: ScrollBehavior = 'smooth') {
-	if (!bglSlider) return
-	if (props.loop) {
-		if (index >= originalSlideCount) {
-			index = index % originalSlideCount
-			behavior = 'auto'
-		} else if (index < 0) {
-			index = originalSlideCount - (-index % originalSlideCount)
-			behavior = 'auto'
-		}
-	}
-
+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 = bglSlider.offsetWidth * index * (isRTL ? -1 : 1)
-	bglSlider.scrollTo({ left: scrollX, behavior })
+	const scrollX = slider.offsetWidth * index * (isRTL ? -1 : 1)
+	slider.scrollTo({ left: scrollX, behavior: 'smooth' })
 	activeSlideIndex = index
 	evalHeight()
 }
 
-watch(() => props.index, (index) => { goToSlide(index) })
+watch(() => props.index, goToSlide)
 
-watch(() => activeSlideIndex, (index) => { emit('update:index', index) })
+watch(
+	() => activeSlideIndex,
+	(index) => { emit('update:index', index) }
+)
 
 function scrollEnd() {
-	if (props.items !== 1 || !bglSlider) return
-	const nextSlide = Math.round(bglSlider.scrollLeft / bglSlider.offsetWidth)
+	const slider = bglSlider
+	if (!slider || props.items !== 1) return
+	const nextSlide = Math.round(slider.scrollLeft / slider.offsetWidth)
 	goToSlide(nextSlide)
 }
 
@@ -74,10 +82,11 @@ function stopDragging(e: MouseEvent) {
 	const slider = bglSlider
 	if (!slider) return
 	const isDragForward = startX > e.pageX + slider.offsetLeft
-	activeSlideIndex = isDragForward
-		? Math.ceil(slider.scrollLeft / slider.offsetWidth)
-		: Math.floor(slider.scrollLeft / slider.offsetWidth)
+	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)
@@ -87,9 +96,11 @@ function stopDragging(e: MouseEvent) {
 function move(e: MouseEvent) {
 	if (!bglSlider) return
 	const x = e.pageX - bglSlider.offsetLeft
-	if (Math.abs(x - startX) > 20) isDragging = true
+	const walk = x - startX
+	if (walk > 20 || walk < -20) isDragging = true
 	if (!isDragging) return
-	bglSlider.scrollLeft = scrollLeft - (x - startX)
+	const scroll = x - startX
+	bglSlider.scrollLeft = scrollLeft - scroll
 }
 
 function startDragging(e: MouseEvent) {
@@ -103,85 +114,57 @@ function startDragging(e: MouseEvent) {
 }
 
 function next() {
-	if (bglSlider) {
-		goToSlide(activeSlideIndex + 1)
-	}
+	if (!bglSlider) return
+	const slideCount = bglSlider.children.length
+	const isLastSlide = activeSlideIndex >= slideCount - 1
+	if (isLastSlide) goToSlide(0)
+	else goToSlide(activeSlideIndex + 1)
 }
 
 function prev() {
-	if (bglSlider) {
-		goToSlide(activeSlideIndex - 1)
-	}
+	if (!bglSlider) return
+	const slideCount = bglSlider.children.length
+	if (activeSlideIndex === 0) goToSlide(slideCount - 1)
+	else goToSlide(activeSlideIndex - 1)
 }
 
 function evalWidth() {
-	if (bglSlider) goToSlide(activeSlideIndex)
-}
-
-function startAutoplay() {
-	if (props.autoplay) {
-		autoplayInterval = setInterval(next, props.autoplaySpeed)
-	}
-}
-
-function stopAutoplay() {
-	if (autoplayInterval) {
-		clearInterval(autoplayInterval)
-		autoplayInterval = null
-	}
-}
-
-function cloneSlides() {
-	if (!bglSlider || !props.loop) return
-	const slides = Array.from(bglSlider.children)
-	originalSlideCount = slides.length
-	slides.forEach((slide) => {
-		const clone = slide.cloneNode(true) as HTMLElement
-		bglSlider.appendChild(clone)
-	})
-	slides.forEach((slide) => {
-		const clone = slide.cloneNode(true) as HTMLElement
-		bglSlider.insertBefore(clone, bglSlider.firstChild)
-	})
+	if (!bglSlider) return
+	goToSlide(activeSlideIndex)
 }
 
 onMounted(() => {
-	cloneSlides()
 	window.addEventListener('resize', evalWidth)
 	evalHeight()
 	disableDrag()
-	startAutoplay()
 })
 
-onUnmounted(() => {
-	window.removeEventListener('resize', evalWidth)
-	stopAutoplay()
-})
+onUnmounted(() => { window.removeEventListener('resize', evalWidth) })
 </script>
 
 <template>
-	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight: props.autoHeight }">
+	<div class="BglCarousel" :style="{ height: yHeight }" :class="{ autoHeight }">
 		<div
 			ref="bglSlider"
-			class="bgl-slider" :class="[
-				{ dragging: isDragging, clicking: isPressed, [`slides-${props.items}`]: true, allowScroll: props.allowScroll },
-			]"
+			:class="{
+				dragging: isDragging,
+				clicking: isPressed,
+				[`slides-${items}`]: true,
+				allowScroll,
+			}"
+			class="bgl-slider"
 			@scrollend="scrollEnd"
 			@mousedown="startDragging"
-			@mouseenter="stopAutoplay"
-			@mouseleave="startAutoplay"
-			@focusin="stopAutoplay"
-			@focusout="startAutoplay"
 		>
 			<div v-if="isDragging" class="blocker" />
 			<slot />
 		</div>
 		<div class="Handlers">
 			<span @click="prev">
-				<slot name="prev" :index="activeSlideIndex" :prev />
+				<slot :prev :index="activeSlideIndex" name="prev" />
 			</span>
 			<span @click="next">
-				<slot name="next" :index="activeSlideIndex" :next />
+				<slot :next :index="activeSlideIndex" name="next" />
 			</span>
 		</div>
 	</div>
@@ -189,99 +172,99 @@ onUnmounted(() => {
 
 <style scoped>
 .blocker {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 100;
 }
 
 .bgl-slider {
-  display: grid;
-  position: relative;
-  scroll-behavior: smooth;
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  scroll-snap-type: x mandatory;
-  overflow-x: hidden;
+	display: grid;
+	position: relative;
+	scroll-behavior: smooth;
+	grid-auto-flow: column;
+	grid-auto-columns: 100%;
+	scroll-snap-type: x mandatory;
+	overflow-x: hidden;
 }
 
 .autoHeight {
-  transition: height ease 0.7s;
+	transition: height ease 0.7s;
 }
 
 .bgl-slider.allowScroll {
-  overflow-x: scroll;
+	overflow-x: scroll;
 }
 
 .bgl-slider.slides-6 {
-  grid-auto-columns: 15.9%;
-  gap: 1%;
+	grid-auto-columns: 15.9%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-5 {
-  grid-auto-columns: 19.3%;
-  gap: 1%;
+	grid-auto-columns: 19.3%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-4 {
-  grid-auto-columns: 25%;
-  gap: 1%;
- }
+	grid-auto-columns: 24.3%;
+	gap: 1%;
+}
 
 .bgl-slider.slides-3 {
-  grid-auto-columns: 33%;
-  gap: 1%;
+	grid-auto-columns: 33%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-2 {
-  grid-auto-columns: 50%;
-  gap: 1%;
+	grid-auto-columns: 50%;
+	gap: 1%;
 }
 
 .bgl-slider.slides-1 {
-  grid-auto-columns: 100%;
+	grid-auto-columns: 100%;
 }
 
 .bgl-slider::-webkit-scrollbar {
-  display: none;
+	display: none;
 }
 
 .bgl-slider * {
-  scroll-snap-align: center;
+	scroll-snap-align: start;
 }
 
 .dragging.bgl-slider {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-  scroll-snap-type: unset;
+	cursor: grabbing;
+	cursor: -webkit-grabbing;
+	scroll-snap-type: unset;
 }
 
 .clicking.bgl-slider {
-  scroll-behavior: unset;
+	scroll-behavior: unset;
 }
 
 .dragging.bgl-slider * {
-  scroll-snap-align: unset;
-  user-select: none;
+	scroll-snap-align: unset;
+	user-select: none;
 }
 
 @media screen and (max-width: 1280px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 33%;
-  }
+	.bgl-slider.slides-4 {
+		grid-auto-columns: 33%;
+	}
 }
 
 @media screen and (max-width: 991px) {
-  .bgl-slider.slides-4 {
-    grid-auto-columns: 50%;
-  }
+	.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-4 {
+		grid-auto-columns: 100%;
+	}
 }
 </style>

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

@@ -81,4 +81,8 @@ onMounted(() => {
 .dp__calendar_row>div:last-child {
 	pointer-events: auto !important;
 }
+
+.dp__time_input {
+	direction: ltr;
+}
 </style>

package/src/styles/layout.css

@@ -167,7 +167,8 @@
 }
 
 .w-100,
-.width-100 {
+.w-100p,
+.w100p .width-100 {
     width: 100%;
 }
 
@@ -387,6 +388,47 @@
     max-width: 1600px;
 }
 
+.vw10 {
+    width: 10vw;
+}
+
+.vw20 {
+    width: 20vw;
+}
+
+.vw30 {
+    width: 30vw;
+}
+
+.vw40 {
+    width: 40vw;
+}
+
+.vw50 {
+    width: 50vw;
+}
+
+.vw60 {
+    width: 60vw;
+}
+
+.vw70 {
+    width: 70vw;
+}
+
+.vw80 {
+    width: 80vw;
+}
+
+.vw90 {
+    width: 90vw;
+}
+
+.vw100 {
+    width: 100vw;
+}
+
+
 .w-all,
 .wall {
     width: -webkit-fill-available;

package/src/styles/mobilLayout.css

@@ -186,10 +186,12 @@
     }
 
     .m_w-100,
-    .m_width-100 {
+    .m_w100p,
+    .m_w100p .m_width-100 {
         width: 100% !important;
     }
 
+
     .m_w300,
     .m_w350,
     .m_w400,
@@ -317,6 +319,47 @@
         max-width: 850px;
     }
 
+    .m_vw10 {
+        width: 10vw;
+    }
+
+    .m_vw20 {
+        width: 20vw;
+    }
+
+    .m_vw30 {
+        width: 30vw;
+    }
+
+    .m_vw40 {
+        width: 40vw;
+    }
+
+    .m_vw50 {
+        width: 50vw;
+    }
+
+    .m_vw60 {
+        width: 60vw;
+    }
+
+    .m_vw70 {
+        width: 70vw;
+    }
+
+    .m_vw80 {
+        width: 80vw;
+    }
+
+    .m_vw90 {
+        width: 90vw;
+    }
+
+    .m_vw100 {
+        width: 100vw;
+    }
+
+
     .m_w-all,
     .m_wall {
         width: -webkit-fill-available;