golden-logic-ui 1.2.21 → 1.2.23

package/dist/GlMultiItemSlideDynamic-BhdHrj3L.js

@@ -0,0 +1,434 @@
+import { createElementBlock as s, openBlock as i, createElementVNode as r, normalizeClass as h, createCommentVNode as u, renderSlot as y, withModifiers as v, Fragment as f, renderList as g } from "vue";
+import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const x = {
+  props: {
+    elements_to_show_prop: {
+      type: Number,
+      default: 3
+    },
+    element_size: {
+      type: Number,
+      default: 80
+    },
+    hide_arrow: {
+      type: Boolean,
+      default: !1
+    },
+    hide_indicators: {
+      type: Boolean,
+      default: !1
+    },
+    disable_touch: {
+      type: Boolean,
+      default: !1
+    },
+    direction_property: {
+      type: String,
+      default: "ltr"
+      // Default to left-to-right
+    },
+    slider_arrows_indicators_position: {
+      type: String,
+      default: "arrows_outside_slider"
+      // arrows_outside_slide,arrows_indicators_inside_slider,arrows_indicators_below_slider
+    }
+  },
+  data: function() {
+    return {
+      mutationObserver: null,
+      elementsToShow: 3,
+      dotsNum: 0,
+      currentDot: 1,
+      dotsNavigation: [],
+      touchStartX: 0,
+      isMoving: !1,
+      initialX: 0,
+      initialY: 0,
+      slide_size: 0,
+      Random_string: this.generateRandomString(6)
+    };
+  },
+  mounted() {
+    this.elementsToShow = this.elements_to_show_prop, this.observeSlotChanges(), this.initSlider(), this.disable_touch || this.movingActions();
+  },
+  beforeUnmount() {
+    this.mutationObserver && this.mutationObserver.disconnect();
+  },
+  methods: {
+    observeSlotChanges() {
+      const o = this.$refs.slotContainer;
+      o && (this.mutationObserver = new MutationObserver((t) => {
+        t.forEach((e) => {
+          this.initSlider();
+        });
+      }), this.mutationObserver.observe(o, {
+        childList: !0,
+        subtree: !0
+      }));
+    },
+    sliderIndicatorsAction() {
+      var o = "";
+      return this.direction_property == "rtl" && (o += " space-x-reverse "), this.slider_arrows_indicators_position == "arrows_indicators_inside_slider" && (o += " slider_indicators "), o;
+    },
+    sliderContainerAction() {
+      var o = "";
+      return !this.hide_arrow && this.slider_arrows_indicators_position == "arrows_outside_slider" || this.slider_arrows_indicators_position != "arrows_outside_slider", o;
+    },
+    generateRandomString(o) {
+      let t = "";
+      const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", w = e.length;
+      for (let d = 0; d < o; d++)
+        t += e.charAt(Math.floor(Math.random() * w));
+      return t;
+    },
+    movingActions() {
+      let o = this, t = document.getElementById("slider_" + this.Random_string);
+      const e = (d) => {
+        t.style.cursor = "grabbing";
+        const n = (a) => {
+          const c = a.clientX || a.touches && a.touches[0] && a.touches[0].clientX, k = a.clientY || a.touches && a.touches[0] && a.touches[0].clientY, _ = c - o.initialX, m = k - o.initialY;
+          Math.abs(_) > Math.abs(m) ? (a.preventDefault(), Math.abs(_) >= 70 && (_ < 0 ? o.next() : o.prev(), o.initialX = c)) : t.style.cursor = "grab", Math.abs(m) > Math.abs(_) && (t.style.cursor = "grab");
+        }, l = () => {
+          document.removeEventListener("mousemove", n), document.removeEventListener("touchmove", n), document.removeEventListener("mouseup", l), document.removeEventListener("touchend", l), t.style.cursor = "grab";
+        };
+        document.addEventListener("mousemove", n), document.addEventListener("touchmove", n, { passive: !1 }), document.addEventListener("mouseup", l), document.addEventListener("touchend", l), o.initialX = d.clientX || d.touches && d.touches[0] && d.touches[0].clientX, o.initialY = d.clientY || d.touches && d.touches[0] && d.touches[0].clientY;
+      }, w = (d) => {
+        d.key === "ArrowLeft" ? o.prev() : d.key === "ArrowRight" && o.next();
+      };
+      t.addEventListener("mousedown", e), t.addEventListener("touchstart", e), document.addEventListener("keydown", w);
+    },
+    next() {
+      this.currentDot < this.dotsNavigation.length && (this.currentDot++, this.setDot(this.currentDot));
+    },
+    prev() {
+      this.currentDot > 1 && (this.currentDot--, this.setDot(this.currentDot));
+    },
+    initSlider() {
+      let o = document.getElementById("sliderContainer_" + this.Random_string), t = document.getElementById("mainSliderContainer_" + this.Random_string), e = document.getElementById("slider_" + this.Random_string), w = e.querySelectorAll("li"), d = Array.from(w).filter((a) => a.parentNode === e);
+      d[0];
+      let n = this.element_size + 28, l = o.clientWidth;
+      if (this.elementsToShow = Math.floor(this.hide_arrow ? t.clientWidth / n : l / n), n = (this.hide_arrow ? t.clientWidth : l) / this.elementsToShow - 28, d.length > 1) {
+        this.dotsNum = Math.ceil(d.length / this.elementsToShow);
+        let a = this.hide_arrow ? t.clientWidth : l;
+        this.dotsNavigation = [];
+        for (let c = 0; c < this.dotsNum; c++)
+          this.dotsNavigation.push(a * c);
+      }
+      e.style.transition = "margin", e.style.transitionDuration = "1s";
+      for (let a = 0; a < d.length; a++) {
+        const c = d[a];
+        c.style.width = n + "px", c.style.minWidth = n + "px";
+      }
+    },
+    setDot(o) {
+      let t = document.getElementById("slider_" + this.Random_string);
+      this.direction_property == "rtl" ? t.style.marginRight = -this.dotsNavigation[o - 1] + "px" : t.style.marginLeft = -this.dotsNavigation[o - 1] + "px", this.currentDot = o;
+    }
+  }
+}, b = ["id"], C = {
+  key: 0,
+  class: "items-center hidden w-2/12 xl:flex xxl:flex md:flex sm:flex arrow_button"
+}, M = { class: "w-full" }, B = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, N = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, S = ["id"], E = ["id"], D = { class: "w-full" }, j = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, L = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, R = { class: "w-full" }, A = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, X = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, I = ["onClick"], Y = {
+  key: 1,
+  class: "flex justify-between pl-5 pr-5"
+}, H = ["onClick"], O = {
+  key: 0,
+  class: "flex"
+}, W = { class: "flex items-center" }, T = { class: "w-full" }, z = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, V = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, q = { class: "flex items-center" }, F = { class: "w-full" }, G = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, K = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, U = {
+  key: 1,
+  class: "items-center hidden w-2/12 xl:flex xxl:flex md:flex sm:flex arrow_button"
+}, J = { class: "w-full" }, P = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, Q = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "w-6 h-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+function Z(o, t, e, w, d, n) {
+  return i(), s("div", null, [
+    r("div", {
+      class: h(["w-full", !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? "flex" : "relative block"]),
+      id: "mainSliderContainer_" + o.Random_string
+    }, [
+      o.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? (i(), s("div", C, [
+        r("div", M, [
+          r("button", {
+            class: "p-3 mr-5 rounded-full shadow-lg arrow_button_styles",
+            onClick: t[0] || (t[0] = (l) => n.prev())
+          }, [
+            e.direction_property == "ltr" ? (i(), s("svg", B, t[6] || (t[6] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+              }, null, -1)
+            ]))) : u("", !0),
+            e.direction_property == "rtl" ? (i(), s("svg", N, t[7] || (t[7] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }, null, -1)
+            ]))) : u("", !0)
+          ])
+        ])
+      ])) : u("", !0),
+      r("div", {
+        class: h(["overflow-hidden flex flex-col gap-3 w-full w-12/12", n.sliderContainerAction()]),
+        id: "sliderContainer_" + o.Random_string
+      }, [
+        r("ul", {
+          ref: "slotContainer",
+          class: h(["flex w-full", e.elements_to_show_prop == 1 ? "" : "gap-7"]),
+          id: "slider_" + o.Random_string
+        }, [
+          o.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_indicators_inside_slider" ? (i(), s("div", {
+            key: 0,
+            class: h(["items-center justify-center hidden arrow_button xl:flex xxl:flex md:flex sm:flex", e.direction_property == "rtl" ? "arrow_button_next" : "arrow_button_prev"])
+          }, [
+            r("div", D, [
+              r("button", {
+                class: "p-3 rounded-full shadow-lg arrow_button_styles",
+                onClick: t[1] || (t[1] = v((l) => n.prev(), ["stop"]))
+              }, [
+                e.direction_property == "ltr" ? (i(), s("svg", j, t[8] || (t[8] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                  }, null, -1)
+                ]))) : u("", !0),
+                e.direction_property == "rtl" ? (i(), s("svg", L, t[9] || (t[9] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                  }, null, -1)
+                ]))) : u("", !0)
+              ])
+            ])
+          ], 2)) : u("", !0),
+          y(o.$slots, "default", {}, void 0, !0),
+          o.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_indicators_inside_slider" ? (i(), s("div", {
+            key: 1,
+            class: h(["items-center justify-center hidden xl:flex xxl:flex md:flex sm:flex arrow_button", e.direction_property == "rtl" ? "arrow_button_prev" : "arrow_button_next"])
+          }, [
+            r("div", R, [
+              r("button", {
+                class: "p-3 rounded-full shadow-lg arrow_button_styles",
+                onClick: t[2] || (t[2] = v((l) => n.next(), ["stop"]))
+              }, [
+                e.direction_property == "ltr" ? (i(), s("svg", A, t[10] || (t[10] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                  }, null, -1)
+                ]))) : u("", !0),
+                e.direction_property == "rtl" ? (i(), s("svg", X, t[11] || (t[11] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                  }, null, -1)
+                ]))) : u("", !0)
+              ])
+            ])
+          ], 2)) : u("", !0)
+        ], 10, E),
+        !e.hide_indicators && e.slider_arrows_indicators_position != "arrows_indicators_below_slider" ? (i(), s("div", {
+          key: 0,
+          class: h(["flex justify-center mb-1 space-x-1", n.sliderIndicatorsAction()])
+        }, [
+          (i(!0), s(f, null, g(o.dotsNum, (l) => (i(), s("button", {
+            role: "button",
+            class: h(["gl-dot", { active: o.currentDot == l }]),
+            key: l,
+            onClick: (a) => n.setDot(l)
+          }, t[12] || (t[12] = [
+            r("span", null, null, -1)
+          ]), 10, I))), 128))
+        ], 2)) : u("", !0),
+        !e.hide_indicators && e.slider_arrows_indicators_position == "arrows_indicators_below_slider" ? (i(), s("div", Y, [
+          r("div", {
+            class: h(["flex justify-center mb-1 space-x-1", n.sliderIndicatorsAction()])
+          }, [
+            (i(!0), s(f, null, g(o.dotsNum, (l) => (i(), s("button", {
+              role: "button",
+              class: h(["gl-dot", { active: o.currentDot == l }]),
+              key: l,
+              onClick: (a) => n.setDot(l)
+            }, t[13] || (t[13] = [
+              r("span", null, null, -1)
+            ]), 10, H))), 128))
+          ], 2),
+          o.dotsNum > 0 ? (i(), s("div", O, [
+            r("div", W, [
+              r("div", T, [
+                r("button", {
+                  class: h(["p-3 rounded-full arrow_button_styles", e.direction_property == "rtl" ? "ml-3" : "mr-3"]),
+                  onClick: t[3] || (t[3] = (l) => n.prev())
+                }, [
+                  e.direction_property == "ltr" ? (i(), s("svg", z, t[14] || (t[14] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                    }, null, -1)
+                  ]))) : u("", !0),
+                  e.direction_property == "rtl" ? (i(), s("svg", V, t[15] || (t[15] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                    }, null, -1)
+                  ]))) : u("", !0)
+                ], 2)
+              ])
+            ]),
+            r("div", q, [
+              r("div", F, [
+                r("button", {
+                  class: "p-3 rounded-full arrow_button_styles",
+                  onClick: t[4] || (t[4] = (l) => n.next())
+                }, [
+                  e.direction_property == "ltr" ? (i(), s("svg", G, t[16] || (t[16] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                    }, null, -1)
+                  ]))) : u("", !0),
+                  e.direction_property == "rtl" ? (i(), s("svg", K, t[17] || (t[17] = [
+                    r("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+                    }, null, -1)
+                  ]))) : u("", !0)
+                ])
+              ])
+            ])
+          ])) : u("", !0)
+        ])) : u("", !0)
+      ], 10, S),
+      o.dotsNum > 0 && !e.hide_arrow && e.slider_arrows_indicators_position == "arrows_outside_slider" ? (i(), s("div", U, [
+        r("div", J, [
+          r("button", {
+            class: "p-3 ml-5 rounded-full shadow-lg arrow_button_styles",
+            onClick: t[5] || (t[5] = (l) => n.next())
+          }, [
+            e.direction_property == "ltr" ? (i(), s("svg", P, t[18] || (t[18] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M13 7l5 5m0 0l-5 5m5-5H6"
+              }, null, -1)
+            ]))) : u("", !0),
+            e.direction_property == "rtl" ? (i(), s("svg", Q, t[19] || (t[19] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M11 17l-5-5m0 0l5-5m-5 5h12"
+              }, null, -1)
+            ]))) : u("", !0)
+          ])
+        ])
+      ])) : u("", !0)
+    ], 10, b)
+  ]);
+}
+const et = /* @__PURE__ */ p(x, [["render", Z], ["__scopeId", "data-v-4c7f63bd"]]);
+export {
+  et as default
+};